Prevent image loading placeholder for cached images (#669)

Give the image time to get loaded from the cache before setting the loading state
Suwayomi · Mar 24, 2024 · a96038b · a96038b
1 parent 6186cb0
commit a96038b
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx
@@ -49,6 +49,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
     useEffect(() => {
         let tmpImageSourceUrl: string;
         const imageRequest = requestManager.requestImage(src);
+        let cacheTimeout: NodeJS.Timeout;
 
         const fetchImage = async () => {
             try {
@@ -60,7 +61,12 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
                     tmpImageSourceUrl = image;
                 };
 
-                const checkCache = await Promise.race([imageRequest.response, Promise.resolve(false)]);
+                const checkCache = await Promise.race([
+                    imageRequest.response,
+                    new Promise((resolve) => {
+                        cacheTimeout = setTimeout(resolve, 50);
+                    }),
+                ]);
                 const isImageCached = !!checkCache;
 
                 if (isImageCached) {
@@ -82,6 +88,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
             if (tmpImageSourceUrl) {
                 URL.revokeObjectURL(tmpImageSourceUrl);
             }
+            clearTimeout(cacheTimeout);
             imageRequest.abortRequest(new Error('Component was unmounted'));
         };
     }, [imgLoadRetryKey]);