From 63dcab09e50298b862a12ca45a8e003aabef23d4 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 27 Apr 2025 16:30:02 -0500
Subject: [PATCH] Update image fallback loading check

---
 src/components/image/ImageWithFallback.tsx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index 52c5ca9a..d3a17a67 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -24,17 +24,7 @@ export default function ImageWithFallback({
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
-  const onLoad = useCallback(() => {
-    // Prevent blank flash by waiting for image to load
-    if (
-      imgRef.current?.complete &&
-      (imgRef.current?.naturalWidth ?? 0) > 0
-    ) {
-      setIsLoading(false);
-    } else {
-      setTimeout(() => setIsLoading(false), 100);
-    }
-  }, []);
+  const onLoad = useCallback(() => setIsLoading(false), []);
   const onError = useCallback(() => setDidError(true), []);
 
   const [hideFallback, setHideFallback] = useState(false);
@@ -43,7 +33,11 @@ export default function ImageWithFallback({
 
   useEffect(() => {
     const timeout = setTimeout(
-      () => setWasCached(imgRef.current?.complete ?? false),
+      // Prevent blank flash by waiting for image to load
+      () => setWasCached(
+        Boolean(imgRef.current?.complete) &&
+        (imgRef.current?.naturalWidth ?? 0) > 0,
+      ),
       100,
     );
     return () => clearTimeout(timeout);