Add logic to retry all errored pages

This commit is contained in:
schroda
2024-12-07 04:47:28 +01:00
parent da0004de4a
commit be0d1dbf30
17 changed files with 135 additions and 22 deletions

View File

@@ -30,11 +30,14 @@ interface IProps {
imgStyle?: SxProps<Theme>;
onLoad?: () => void;
onError?: () => void;
shouldDecode?: boolean;
useFetchApi?: boolean;
priority?: Priority;
retryKeyPrefix?: string;
}
export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
@@ -45,9 +48,11 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
src,
alt,
onLoad,
onError,
spinnerStyle: { small, ...spinnerStyle } = {},
imgStyle,
priority,
retryKeyPrefix,
} = props;
const { t } = useTranslation();
@@ -63,6 +68,10 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
setIsLoading(loading);
setHasError(error);
if (error && !loading && !aborted) {
onError?.();
}
if (!loading && !error && !aborted) {
onLoad?.();
}
@@ -114,7 +123,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
clearTimeout(cacheTimeout);
imageRequest.abortRequest(new Error('Component was unmounted'));
};
}, [src, imgLoadRetryKey, showMissingImageIcon, shouldLoad]);
}, [src, imgLoadRetryKey, retryKeyPrefix, showMissingImageIcon, shouldLoad]);
return (
<>
@@ -134,7 +143,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
) : (
<Box
component="img"
key={`${src}_${imgLoadRetryKey}`}
key={`${src}_${imgLoadRetryKey}_${retryKeyPrefix}`}
sx={[
...(Array.isArray(imgStyle) ? (imgStyle ?? []) : [imgStyle]),
applyStyles(!imageSourceUrl || isLoading || hasError, {