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.

src/base/components/SpinnerImage.tsx

@@ -119,12 +119,18 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
             return () => {};
         }
 
+        let isAborted = false;
         let imageRequest: ImageRequest = {
             response: Promise.resolve(''),
             cleanup: noOp,
             abortRequest: noOp,
             fromCache: false,
         };
+        const abortRequest = () => {
+            isAborted = true;
+            imageRequest.cleanup();
+            imageRequest.abortRequest(new Error('Component was unmounted'));
+        };
         const fetchImage = async () => {
             try {
                 imageRequest = await requestManager.requestImage(src, {
@@ -135,6 +141,12 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
                     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) {
                     updateImageState(true);
                 }
@@ -153,8 +165,7 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
         fetchImage().catch(() => {});
 
         return () => {
-            imageRequest.cleanup();
-            imageRequest.abortRequest(new Error('Component was unmounted'));
+            abortRequest();
         };
     }, [src, imgLoadRetryKey, retryKeyPrefix, showMissingImageIcon, shouldLoad]);