fix: stop lingering reader prefetches from blocking navigation

src/components/reader/hooks/useImageLoader.ts

@@ -21,12 +21,15 @@ export function useImageLoader({
   prefetchCount = 5,
   nextBook,
 }: UseImageLoaderProps) {
+  const PREFETCH_CONCURRENCY = 4;
   const [loadedImages, setLoadedImages] = useState<Record<ImageKey, ImageDimensions>>({});
   const [imageBlobUrls, setImageBlobUrls] = useState<Record<ImageKey, string>>({});
   const loadedImagesRef = useRef(loadedImages);
   const imageBlobUrlsRef = useRef(imageBlobUrls);
+  const isMountedRef = useRef(true);
   // Track ongoing fetch requests to prevent duplicates
   const pendingFetchesRef = useRef<Set<ImageKey>>(new Set());
+  const abortControllersRef = useRef<Map<ImageKey, AbortController>>(new Map());
 
   // Keep refs in sync with state
   useEffect(() => {
@@ -37,6 +40,29 @@ export function useImageLoader({
     imageBlobUrlsRef.current = imageBlobUrls;
   }, [imageBlobUrls]);
 
+  useEffect(() => {
+    isMountedRef.current = true;
+    const abortControllers = abortControllersRef.current;
+    const pendingFetches = pendingFetchesRef.current;
+
+    return () => {
+      isMountedRef.current = false;
+      abortControllers.forEach((controller) => controller.abort());
+      abortControllers.clear();
+      pendingFetches.clear();
+    };
+  }, []);
+
+  const runWithConcurrency = useCallback(
+    async <T,>(items: T[], worker: (item: T) => Promise<void>, concurrency = PREFETCH_CONCURRENCY) => {
+      for (let i = 0; i < items.length; i += concurrency) {
+        const batch = items.slice(i, i + concurrency);
+        await Promise.all(batch.map((item) => worker(item)));
+      }
+    },
+    [PREFETCH_CONCURRENCY]
+  );
+
   const getPageUrl = useCallback(
     (pageNum: number) => `/api/komga/books/${bookId}/pages/${pageNum}`,
     [bookId]
@@ -60,11 +86,14 @@ export function useImageLoader({
 
       // Mark as pending
       pendingFetchesRef.current.add(pageNum);
+      const controller = new AbortController();
+      abortControllersRef.current.set(pageNum, controller);
 
       try {
         // Use browser cache if available - the server sets Cache-Control headers
         const response = await fetch(getPageUrl(pageNum), {
           cache: "default", // Respect Cache-Control headers from server
+          signal: controller.signal,
         });
         if (!response.ok) {
           return;
@@ -76,6 +105,11 @@ export function useImageLoader({
         // Create image to get dimensions
         const img = new Image();
         img.onload = () => {
+          if (!isMountedRef.current || controller.signal.aborted) {
+            URL.revokeObjectURL(blobUrl);
+            return;
+          }
+
           setLoadedImages((prev) => ({
             ...prev,
             [pageNum]: { width: img.naturalWidth, height: img.naturalHeight },
@@ -87,12 +121,18 @@ export function useImageLoader({
             [pageNum]: blobUrl,
           }));
         };
+
+        img.onerror = () => {
+          URL.revokeObjectURL(blobUrl);
+        };
+
         img.src = blobUrl;
       } catch {
         // Silently fail prefetch
       } finally {
         // Remove from pending set
         pendingFetchesRef.current.delete(pageNum);
+        abortControllersRef.current.delete(pageNum);
       }
     },
     [getPageUrl]
@@ -120,13 +160,12 @@ export function useImageLoader({
       // Let all prefetch requests run - the server queue will manage concurrency
       // The browser cache and our deduplication prevent redundant requests
       if (pagesToPrefetch.length > 0) {
-        // Fire all requests in parallel - server queue handles throttling
+        runWithConcurrency(pagesToPrefetch, prefetchImage).catch(() => {
-        Promise.all(pagesToPrefetch.map((pageNum) => prefetchImage(pageNum))).catch(() => {
           // Silently fail - prefetch is non-critical
         });
       }
     },
-    [prefetchImage, prefetchCount, _pages.length]
+    [prefetchImage, prefetchCount, _pages.length, runWithConcurrency]
   );
 
   // Prefetch pages from next book
@@ -153,14 +192,16 @@ export function useImageLoader({
 
       // Let all prefetch requests run - server queue handles concurrency
       if (pagesToPrefetch.length > 0) {
-        Promise.all(
+        runWithConcurrency(pagesToPrefetch, async ({ pageNum, nextBookPageKey }) => {
-          pagesToPrefetch.map(async ({ pageNum, nextBookPageKey }) => {
           // Mark as pending
           pendingFetchesRef.current.add(nextBookPageKey);
+          const controller = new AbortController();
+          abortControllersRef.current.set(nextBookPageKey, controller);
 
           try {
             const response = await fetch(`/api/komga/books/${nextBook.id}/pages/${pageNum}`, {
               cache: "default", // Respect Cache-Control headers from server
+              signal: controller.signal,
             });
             if (!response.ok) {
               return;
@@ -172,6 +213,11 @@ export function useImageLoader({
             // Create image to get dimensions
             const img = new Image();
             img.onload = () => {
+              if (!isMountedRef.current || controller.signal.aborted) {
+                URL.revokeObjectURL(blobUrl);
+                return;
+              }
+
               setLoadedImages((prev) => ({
                 ...prev,
                 [nextBookPageKey]: { width: img.naturalWidth, height: img.naturalHeight },
@@ -183,19 +229,24 @@ export function useImageLoader({
                 [nextBookPageKey]: blobUrl,
               }));
             };
+
+            img.onerror = () => {
+              URL.revokeObjectURL(blobUrl);
+            };
+
             img.src = blobUrl;
           } catch {
             // Silently fail prefetch
           } finally {
             pendingFetchesRef.current.delete(nextBookPageKey);
+            abortControllersRef.current.delete(nextBookPageKey);
           }
-          })
+        }).catch(() => {
-        ).catch(() => {
           // Silently fail - prefetch is non-critical
         });
       }
     },
-    [nextBook, prefetchCount]
+    [nextBook, prefetchCount, runWithConcurrency]
   );
 
   // Force reload handler