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);