From 5e1c00a3e9a8bf346c1c47141fc185e471df9e13 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 5 Jun 2025 18:31:23 +0800
Subject: [PATCH] fix: first load thumbnail transition

- Removed the loading progress percentage display from the LoadingIndicator component.
- Updated the ProgressiveImage component to manage thumbnail loading state with a new useState hook.
- Adjusted the thumbnail image rendering to transition opacity based on loading state.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../ui/photo-viewer/LoadingIndicator.tsx      |  3 ---
 .../ui/photo-viewer/ProgressiveImage.tsx      | 21 +++++++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/ui/photo-viewer/LoadingIndicator.tsx b/apps/web/src/components/ui/photo-viewer/LoadingIndicator.tsx
index 77ad6f38..e14a75c9 100644
--- a/apps/web/src/components/ui/photo-viewer/LoadingIndicator.tsx
+++ b/apps/web/src/components/ui/photo-viewer/LoadingIndicator.tsx
@@ -79,9 +79,6 @@ export const LoadingIndicator = ({
                       {loadingState.codecInfo}
                     </p>
                   )}
-                  <span className="text-xs text-white/60 tabular-nums">
-                    {Math.round(loadingState.loadingProgress)}%
-                  </span>
                 </>
               ) : (
                 <>
diff --git a/apps/web/src/components/ui/photo-viewer/ProgressiveImage.tsx b/apps/web/src/components/ui/photo-viewer/ProgressiveImage.tsx
index 69033d73..4f932173 100644
--- a/apps/web/src/components/ui/photo-viewer/ProgressiveImage.tsx
+++ b/apps/web/src/components/ui/photo-viewer/ProgressiveImage.tsx
@@ -69,7 +69,7 @@ export const ProgressiveImage = ({
 
   const thumbnailRef = useRef<HTMLImageElement>(null)
   const transformRef = useRef<WebGLImageViewerRef>(null)
-  const thumbnailAnimateController = useAnimationControls()
+
   const loadingIndicatorRef = useRef<LoadingIndicatorRef>(null)
   const imageLoaderManagerRef = useRef<ImageLoaderManager | null>(null)
 
@@ -139,11 +139,11 @@ export const ProgressiveImage = ({
     [onZoomChange],
   )
 
+  const [isThumbnailLoaded, setIsThumbnailLoaded] = useState(false)
+
   const handleThumbnailLoad = useCallback(() => {
-    thumbnailAnimateController.start({
-      opacity: 1,
-    })
-  }, [thumbnailAnimateController])
+    setIsThumbnailLoaded(true)
+  }, [])
 
   const showContextMenu = useShowContextMenu()
 
@@ -167,16 +167,15 @@ export const ProgressiveImage = ({
     <div className={clsxm('relative overflow-hidden', className)}>
       {/* 缩略图 */}
       {thumbnailSrc && (
-        <m.img
+        <img
           ref={thumbnailRef}
-          initial={{ opacity: 0 }}
-          exit={{ opacity: 0 }}
           src={thumbnailSrc}
           key={thumbnailSrc}
           alt={alt}
-          transition={Spring.presets.smooth}
-          className="absolute inset-0 h-full w-full object-contain"
-          animate={thumbnailAnimateController}
+          className={clsxm(
+            'absolute inset-0 h-full w-full object-contain transition-opacity duration-300',
+            isThumbnailLoaded ? 'opacity-100' : 'opacity-0',
+          )}
           onLoad={handleThumbnailLoad}
         />
       )}