From 54c7b04d482a5b30326f172c890b93f6a6592450 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 4 Apr 2025 23:35:11 -0500
Subject: [PATCH] Adjust image fallback cache behavior

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

diff --git a/src/components/image/ImageWithFallback.tsx b/src/components/image/ImageWithFallback.tsx
index 0968d2e2..0e97f315 100644
--- a/src/components/image/ImageWithFallback.tsx
+++ b/src/components/image/ImageWithFallback.tsx
@@ -5,7 +5,7 @@ import { BLUR_ENABLED } from '@/app/config';
 import { useAppState } from '@/state/AppState';
 import { clsx}  from 'clsx/lite';
 import Image, { ImageProps } from 'next/image';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export default function ImageWithFallback(props: ImageProps & {
   blurCompatibilityLevel?: 'none' | 'low' | 'high'
@@ -22,7 +22,7 @@ export default function ImageWithFallback(props: ImageProps & {
 
   const { shouldDebugImageFallbacks } = useAppState();
 
-  const [wasCached, setWasCached] = useState(true);
+  const [wasCached, setWasCached] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
@@ -31,16 +31,6 @@ export default function ImageWithFallback(props: ImageProps & {
 
   const [hideFallback, setHideFallback] = useState(false);
 
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  useEffect(() => {
-    const timeout = setTimeout(
-      () => setWasCached(imgRef.current?.complete ?? false),
-      100,
-    );
-    return () => clearTimeout(timeout);
-  }, []);
-
   useEffect(() => {
     if (!isLoading && !didError) {
       const timeout = setTimeout(() => {
@@ -98,7 +88,7 @@ export default function ImageWithFallback(props: ImageProps & {
         </div>}
       <Image {...{
         ...rest,
-        ref: imgRef,
+        ref: (element) => setWasCached(element?.complete ?? false),
         priority,
         className: classNameImage,
         onLoad,