Simplifed thumbnail loading.

ashleydavis · Jan 25, 2025 · e7b39fc · e7b39fc
1 parent 0aa3223
commit e7b39fc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 22 deletions.
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -91,7 +91,7 @@ i {
 }
 
 .fade-in-micro {
-    animation: fadeInMicro 0.2s cubic-bezier(1,0,.95,.82);
+    animation: fadeInMicro 0.3s cubic-bezier(1,0,.95,.82);
 }
 
 @keyframes fadeInThumb {

diff --git a/packages/user-interface/src/components/gallery-image.tsx b/packages/user-interface/src/components/gallery-image.tsx
@@ -55,30 +55,24 @@ export function GalleryImage({ item, onClick, x, y, width, height }: IGalleryIma
 
         setMicroDataURL(`data:image/jpeg;base64,${item.micro}`);
 
-        // 
-        // A moment later load the the full thumb.
-        //
-        const thumbTimeout = setTimeout(() => {
-            loadAsset(item._id, "thumb")
-                .then(assetLoaded => {
-                    if (assetLoaded) {
-                        setThumbObjectURL(assetLoaded.objectUrl);
-                        setTimeout(() => {
-                            setMicroDataURL(undefined);
-                        }, 1200);
-                    }
-                })
-                .catch(err => {
-                    console.error(`Failed to load asset: thumb:${item._id}`);
-                    console.error(err);
-                });
-        }, 300);
+        loadAsset(item._id, "thumb")
+            .then(assetLoaded => {
+                if (assetLoaded) {
+                    setThumbObjectURL(assetLoaded.objectUrl);
+                    setTimeout(() => {
+                        setMicroDataURL(undefined);
+                    }, 1200);
+                }
+            })
+            .catch(err => {
+                console.error(`Failed to load asset: thumb:${item._id}`);
+                console.error(err);
+            });
 
         return () => {
-            clearTimeout(thumbTimeout);
             unloadAsset(item._id, "thumb");
         };
-    }, [item]);
+    }, []);
 
     const isSelected = selectedItems.has(item._id);
 
@@ -193,7 +187,7 @@ export function GalleryImage({ item, onClick, x, y, width, height }: IGalleryIma
                             scale: "1.05", // A small tweak to make the image cover the space without gaps.
                             transformOrigin: "center",
                         }}
-                        />                        
+                        />
                 </div>
             }