Call "onImageLoad" callback only on successful load
In case the image load was aborted, the success callback was incorrectly called
This commit is contained in:
@@ -43,11 +43,11 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
|
|||||||
const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
|
const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
|
||||||
const [hasError, setHasError] = useState(false);
|
const [hasError, setHasError] = useState(false);
|
||||||
|
|
||||||
const updateImageState = (loading: boolean, error: boolean = false) => {
|
const updateImageState = (loading: boolean, error: boolean = false, aborted: boolean = false) => {
|
||||||
setIsLoading(loading);
|
setIsLoading(loading);
|
||||||
setHasError(error);
|
setHasError(error);
|
||||||
|
|
||||||
if (!loading && !error) {
|
if (!loading && !error && !aborted) {
|
||||||
onImageLoad?.();
|
onImageLoad?.();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -87,7 +87,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
const wasAborted =
|
const wasAborted =
|
||||||
e instanceof Error && (e.name === 'AbortError' || e.message === 'Component was unmounted');
|
e instanceof Error && (e.name === 'AbortError' || e.message === 'Component was unmounted');
|
||||||
updateImageState(false, !wasAborted);
|
updateImageState(false, !wasAborted, wasAborted);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user