From 7c6e8371b8fed218091222253371c7021613810e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 27 Apr 2025 15:55:30 -0500
Subject: [PATCH] Make sure images load before hiding fallback

---
 src/components/image/ImageWithFallback.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index ab5a6fd3..52c5ca9a 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -24,7 +24,17 @@ export default function ImageWithFallback({
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
-  const onLoad = useCallback(() => setIsLoading(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 onError = useCallback(() => setDidError(true), []);
 
   const [hideFallback, setHideFallback] = useState(false);