Fix aborting image requests

Regression 9ed05f3fc0

Due to the change to check if an image is cached, which is done async, it was possible that the image request was aborted before the request actually got queued.

In that case, the abort was called against the "noop" function and did not actually abort the triggered request.
Thus, after the image got queued, we have to optionally abort it again to ensure that the request really gets aborted.
This commit is contained in:
schroda
2026-05-02 21:23:50 +02:00
parent b032b32ec2
commit 60e087d79a

View File

@@ -119,12 +119,18 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
return () => {}; return () => {};
} }
let isAborted = false;
let imageRequest: ImageRequest = { let imageRequest: ImageRequest = {
response: Promise.resolve(''), response: Promise.resolve(''),
cleanup: noOp, cleanup: noOp,
abortRequest: noOp, abortRequest: noOp,
fromCache: false, fromCache: false,
}; };
const abortRequest = () => {
isAborted = true;
imageRequest.cleanup();
imageRequest.abortRequest(new Error('Component was unmounted'));
};
const fetchImage = async () => { const fetchImage = async () => {
try { try {
imageRequest = await requestManager.requestImage(src, { imageRequest = await requestManager.requestImage(src, {
@@ -135,6 +141,12 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
ignoreQueue, ignoreQueue,
}); });
// In case the request got aborted before it was queued, the abort was called against the "default noop" function and did nothing.
// Thus, abort again to ensure that the actual queued request gets aborted.
if (isAborted) {
abortRequest();
}
if (!imageRequest.fromCache) { if (!imageRequest.fromCache) {
updateImageState(true); updateImageState(true);
} }
@@ -153,8 +165,7 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
fetchImage().catch(() => {}); fetchImage().catch(() => {});
return () => { return () => {
imageRequest.cleanup(); abortRequest();
imageRequest.abortRequest(new Error('Component was unmounted'));
}; };
}, [src, imgLoadRetryKey, retryKeyPrefix, showMissingImageIcon, shouldLoad]); }, [src, imgLoadRetryKey, retryKeyPrefix, showMissingImageIcon, shouldLoad]);