From ec58e1065fafc34ab675d8403cc2635566f5d912 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sat, 22 Feb 2025 17:38:08 -0600
Subject: [PATCH] fix(web): justify layout import (#16267)

* fix(web): justify layout import

* remove dead code
---
 web/src/lib/stores/assets.store.ts | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/stores/assets.store.ts b/web/src/lib/stores/assets.store.ts
index 2eaf5d36e6..85f408fbe0 100644
--- a/web/src/lib/stores/assets.store.ts
+++ b/web/src/lib/stores/assets.store.ts
@@ -4,6 +4,7 @@ import { AssetGridTaskManager } from '$lib/utils/asset-store-task-manager';
 import { generateId } from '$lib/utils/generate-id';
 import type { AssetGridRouteSearchParams } from '$lib/utils/navigation';
 import { fromLocalDateTime, splitBucketIntoDateGroups, type DateGroup } from '$lib/utils/timeline-util';
+import type { JustifiedLayout, LayoutOptions } from '@immich/justified-layout-wasm';
 import { TimeBucketSize, getAssetInfo, getTimeBucket, getTimeBuckets, type AssetResponseDto } from '@immich/sdk';
 import { throttle } from 'lodash-es';
 import { DateTime } from 'luxon';
@@ -226,6 +227,7 @@ export class AssetStore {
   maxBucketAssets = 0;
 
   listeners: BucketListener[] = [];
+  getJustifiedLayoutFromAssets: ((assets: AssetResponseDto[], options: LayoutOptions) => JustifiedLayout) | undefined;
 
   constructor(
     options: AssetStoreOptions,
@@ -387,6 +389,13 @@ export class AssetStore {
     );
     this.initializedSignal();
     this.initialized = true;
+
+    // TODO: move to top level import after https://github.com/sveltejs/kit/issues/7805 is fixed
+    import('$lib/utils/layout-utils')
+      .then(({ getJustifiedLayoutFromAssets }) => {
+        this.getJustifiedLayoutFromAssets = getJustifiedLayoutFromAssets;
+      })
+      .catch(() => void 0);
   }
 
   async updateOptions(options: AssetStoreOptions) {
@@ -435,7 +444,7 @@ export class AssetStore {
 
   private async initialLayout(changedWidth: boolean) {
     for (const bucket of this.buckets) {
-      await this.updateGeometry(bucket, changedWidth);
+      this.updateGeometry(bucket, changedWidth);
     }
     this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
 
@@ -453,7 +462,7 @@ export class AssetStore {
     this.emit(false);
   }
 
-  private async updateGeometry(bucket: AssetBucket, invalidateHeight: boolean) {
+  private updateGeometry(bucket: AssetBucket, invalidateHeight: boolean) {
     if (invalidateHeight) {
       bucket.isBucketHeightActual = false;
       bucket.measured = false;
@@ -476,8 +485,7 @@ export class AssetStore {
       rowHeight: 235,
       rowWidth: Math.floor(viewportWidth),
     };
-    // TODO: move this import and make this method sync after https://github.com/sveltejs/kit/issues/7805 is fixed
-    const { getJustifiedLayoutFromAssets } = await import('$lib/utils/layout-utils');
+
     for (const assetGroup of bucket.dateGroups) {
       if (!assetGroup.heightActual) {
         const unwrappedWidth = (3 / 2) * assetGroup.assets.length * THUMBNAIL_HEIGHT * (7 / 10);
@@ -486,7 +494,9 @@ export class AssetStore {
         assetGroup.height = height;
       }
 
-      assetGroup.geometry = getJustifiedLayoutFromAssets(assetGroup.assets, layoutOptions);
+      if (this.getJustifiedLayoutFromAssets) {
+        assetGroup.geometry = this.getJustifiedLayoutFromAssets(assetGroup.assets, layoutOptions);
+      }
     }
   }
 
@@ -553,7 +563,7 @@ export class AssetStore {
       bucket.assets = assets;
       bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
       this.maxBucketAssets = Math.max(this.maxBucketAssets, assets.length);
-      await this.updateGeometry(bucket, true);
+      this.updateGeometry(bucket, true);
       this.timelineHeight = this.buckets.reduce((accumulator, b) => accumulator + b.bucketHeight, 0);
       bucket.loaded();
       this.notifyListeners({ type: 'loaded', bucket });
@@ -680,7 +690,7 @@ export class AssetStore {
         return bDate.diff(aDate).milliseconds;
       });
       bucket.dateGroups = splitBucketIntoDateGroups(bucket, get(locale));
-      void this.updateGeometry(bucket, true);
+      this.updateGeometry(bucket, true);
     }
 
     this.emit(true);