From 73f9c939e889e9c20a609cdae53eba1347b14c2b Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 24 Jun 2025 17:48:06 -0500
Subject: [PATCH] Refine image fallback timing strat

---
 src/components/image/ImageWithFallback.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index ffc595bd..b2e8dc06 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -25,7 +25,9 @@ export default function ImageWithFallback({
     areAdminDebugToolsEnabled,
   } = useAppState();
 
-  const [wasCached, setWasCached] = useState(true);
+  const hasLoadedRef = useRef(false);
+  const wasCachedRef = useRef(true);
+
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
@@ -38,22 +40,25 @@ export default function ImageWithFallback({
   const refFallback = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    setWasCached(
-      Boolean(refImage.current?.complete) &&
-      (refImage.current?.naturalWidth ?? 0) > 0,
-    );
+    if (!hasLoadedRef.current) {
+      wasCachedRef.current = (
+        Boolean(refImage.current?.complete) &&
+        (refImage.current?.naturalWidth ?? 0) > 0
+      );
+      hasLoadedRef.current = true;
+    }
   }, []);
 
   const shouldDebugFallbackTiming = areAdminDebugToolsEnabled && debug;
 
   const showFallback =
-    !wasCached &&
+    !wasCachedRef.current &&
     !hideFallback;
 
   if (shouldDebugFallbackTiming) {
     console.log({
       isLoading,
-      wasCached,
+      wasCached: wasCachedRef.current,
       hideFallback,
       showFallback,
     });
@@ -151,7 +156,7 @@ export default function ImageWithFallback({
           (showFallback || shouldDebugImageFallbacks) &&
             'transition-opacity duration-300 ease-in',
           !(BLUR_ENABLED && blurDataURL) && 'bg-main',
-          (isLoading || shouldDebugImageFallbacks)
+          ((isLoading && !wasCachedRef.current) || shouldDebugImageFallbacks)
             ? 'opacity-100'
             : 'opacity-0',
         )}