fix NativeImage state causing crashes in table

src/shared/components/image/image.tsx

@@ -89,11 +89,18 @@ export function BaseImage({
     const effectiveImageRequest =
         isInSessionCache || !enableDebounce ? rawImageRequest : debouncedImageRequest;
 
+    const imageCacheKey = src ?? rawImageRequest?.cacheKey;
+    const trackLoadedInInstance = enableViewport;
+
     const [hasLoadedInInstance, setHasLoadedInInstance] = useState(false);
 
     useEffect(() => {
-        setHasLoadedInInstance(false);
+        if (!trackLoadedInInstance) {
-    }, [effectiveImageRequest?.cacheKey]);
+            return;
+        }
+
+        setHasLoadedInInstance((current) => (current ? false : current));
+    }, [imageCacheKey, trackLoadedInInstance]);
 
     const shouldLoadImage = Boolean(
         effectiveImageRequest &&
@@ -112,13 +119,13 @@ export function BaseImage({
     });
 
     useEffect(() => {
-        if (!nativeImage.isLoaded || !effectiveImageRequest?.cacheKey) {
+        if (!trackLoadedInInstance || !nativeImage.isLoaded || !imageCacheKey) {
             return;
         }
 
-        loadedImageCacheKeys.add(effectiveImageRequest.cacheKey);
+        loadedImageCacheKeys.add(imageCacheKey);
-        setHasLoadedInInstance(true);
+        setHasLoadedInInstance((current) => (current ? current : true));
-    }, [effectiveImageRequest?.cacheKey, nativeImage.isLoaded]);
+    }, [imageCacheKey, nativeImage.isLoaded, trackLoadedInInstance]);
 
     return (
         <ImageContainer

src/shared/components/image/use-native-image.ts

@@ -26,8 +26,11 @@ export function useNativeImage({
     const loadedRequestSignatureRef = useRef<null | string>(null);
     const objectUrlRef = useRef<null | string>(null);
     const onFetchErrorRef = useRef(onFetchError);
+    const requestRef = useRef(request);
     const [state, setState] = useState<NativeImageState>({ status: 'idle' });
 
+    requestRef.current = request;
+
     const requestSignature = useMemo(() => {
         if (!request) {
             return null;
@@ -44,6 +47,8 @@ export function useNativeImage({
     onFetchErrorRef.current = onFetchError;
 
     useEffect(() => {
+        const request = requestRef.current;
+
         const abortCurrentRequest = () => {
             abortControllerRef.current?.abort();
             abortControllerRef.current = null;
@@ -62,28 +67,61 @@ export function useNativeImage({
         if (!request || !requestSignature) {
             abortCurrentRequest();
             revokeObjectUrl();
-            setState({ status: 'idle' });
+            setState((currentState) => {
+                if (currentState.status === 'idle' && !currentState.displaySrc) {
+                    return currentState;
+                }
+
+                return { status: 'idle' };
+            });
             return;
         }
 
         if (!enabled) {
             abortCurrentRequest();
-            setState((currentState) =>
+            setState((currentState) => {
-                currentState.displaySrc
+                if (currentState.displaySrc) {
-                    ? { ...currentState, status: 'loaded' }
+                    if (currentState.status === 'loaded') {
-                    : { status: 'idle' },
+                        return currentState;
-            );
+                    }
+
+                    return { ...currentState, status: 'loaded' };
+                }
+
+                if (currentState.status === 'idle' && !currentState.displaySrc) {
+                    return currentState;
+                }
+
+                return { status: 'idle' };
+            });
             return;
         }
 
         if (loadedRequestSignatureRef.current === requestSignature && objectUrlRef.current) {
-            setState({ displaySrc: objectUrlRef.current, status: 'loaded' });
+            const cachedObjectUrl = objectUrlRef.current;
+
+            setState((currentState) => {
+                if (
+                    currentState.status === 'loaded' &&
+                    currentState.displaySrc === cachedObjectUrl
+                ) {
+                    return currentState;
+                }
+
+                return { displaySrc: cachedObjectUrl, status: 'loaded' };
+            });
             return;
         }
 
         abortCurrentRequest();
         revokeObjectUrl();
-        setState({ status: 'loading' });
+        setState((currentState) => {
+            if (currentState.status === 'loading' && !currentState.displaySrc) {
+                return currentState;
+            }
+
+            return { status: 'loading' };
+        });
 
         const abortController = new AbortController();
         abortControllerRef.current = abortController;
@@ -138,7 +176,7 @@ export function useNativeImage({
                 abortControllerRef.current = null;
             }
         };
-    }, [enabled, fetchPriority, request, requestSignature]);
+    }, [enabled, fetchPriority, requestSignature]);
 
     useEffect(() => {
         return () => {