ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent image loading placeholder for cached images (#669)

Browse Source 
Give the image time to get loaded from the cache before setting the loading state
This commit is contained in:
schroda
2024-03-24 15:03:20 +01:00
committed by GitHub
parent 6186cb0ea3
commit a96038bcb7
1 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/util/SpinnerImage.tsx
View File

@@ -49,6 +49,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
useEffect(() => { useEffect(() => {
let tmpImageSourceUrl: string; let tmpImageSourceUrl: string;
const imageRequest = requestManager.requestImage(src); const imageRequest = requestManager.requestImage(src);
let cacheTimeout: NodeJS.Timeout;
const fetchImage = async () => { const fetchImage = async () => {
try { try {
@@ -60,7 +61,12 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
tmpImageSourceUrl = image; 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; const isImageCached = !!checkCache;
if (isImageCached) { if (isImageCached) {
@@ -82,6 +88,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
if (tmpImageSourceUrl) { if (tmpImageSourceUrl) {
URL.revokeObjectURL(tmpImageSourceUrl); URL.revokeObjectURL(tmpImageSourceUrl);
} }
clearTimeout(cacheTimeout);
imageRequest.abortRequest(new Error('Component was unmounted')); imageRequest.abortRequest(new Error('Component was unmounted'));
}; };
}, [imgLoadRetryKey]); }, [imgLoadRetryKey]);