perf(library): persistent SPA shell, in-memory folder tree caching, and zero-flicker LRU thumbnail caching

docker/frontend/src/Library.tsx

@@ -7,6 +7,7 @@ import { readGps, readSpecs, specsLine } from './engine/imageOps';
 import { isRawName, rawThumbnail } from './engine/rawDevelop';
 import { heicToJpeg, isHeicName } from './engine/heicDevelop';
 import {
+  cachedFolders,
   cachedPhotos,
   canBrowseFolders,
   clearLibraryCache,
@@ -197,7 +198,7 @@ export function Library() {
 
 function Catalogue() {
   const { t } = useI18n();
-  const [folders, setFolders] = useState<LibraryFolder[]>([]);
+  const [folders, setFolders] = useState<LibraryFolder[]>(() => cachedFolders());
   const [ready, setReady] = useState<Set<string>>(new Set());
   // The strip starts on the catalogue the last screen read: coming back from the
   // studio is a screen opening, not a page loading, and the frames the reader was
@@ -2177,58 +2178,83 @@ function TileImg({ src, rot, onPick, title }: { src: string; rot: number; onPick
 }
 
 // One object URL per tile, made when the row does and dropped with it: a folder
-// of thousands cannot hold thousands of live URLs, and the list the panels paint is
-// the only list to make them for. `also` is a frame drawn outside that list — the
-// one on the stage, whose tile may be nowhere near the strip's window.
+const globalThumbUrls = new Map<string, { url: string; blob: Blob }>();
+const GLOBAL_URL_MAX = 2500;
+
+function cacheObjectUrl(id: string, blob: Blob): string {
+  const existing = globalThumbUrls.get(id);
+  if (existing && existing.blob === blob) {
+    return existing.url;
+  }
+  if (existing) {
+    URL.revokeObjectURL(existing.url);
+  } else if (globalThumbUrls.size >= GLOBAL_URL_MAX) {
+    const oldestKey = globalThumbUrls.keys().next().value;
+    if (oldestKey) {
+      const item = globalThumbUrls.get(oldestKey);
+      if (item) URL.revokeObjectURL(item.url);
+      globalThumbUrls.delete(oldestKey);
+    }
+  }
+  const url = URL.createObjectURL(blob);
+  globalThumbUrls.set(id, { url, blob });
+  return url;
+}
+
 function useThumbUrls(photos: LibraryPhoto[], also?: LibraryPhoto | null): Record<string, string> {
-  const [urls, setUrls] = useState<Record<string, string>>({});
-  const made = useRef(new Map<string, { url: string; blob: Blob }>());
+  const list = useMemo(() => (also && !photos.some((p) => p.id === also.id) ? [...photos, also] : photos), [photos, also]);
+
+  const [urls, setUrls] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    for (const p of list) {
+      const cached = globalThumbUrls.get(p.id);
+      if (cached) initial[p.id] = cached.url;
+    }
+    return initial;
+  });
 
   useEffect(() => {
     let alive = true;
-    const list = also && !photos.some((p) => p.id === also.id) ? [...photos, also] : photos;
     if (!list.length) {
       setUrls({});
       return;
     }
-    const ids = list.map((p) => p.id);
 
-    void getPhotoThumbs(ids).then((thumbMap) => {
+    const syncUrls: Record<string, string> = {};
+    const idsToFetch: string[] = [];
+    for (const p of list) {
+      const cached = globalThumbUrls.get(p.id);
+      if (cached) {
+        syncUrls[p.id] = cached.url;
+      } else {
+        idsToFetch.push(p.id);
+      }
+    }
+
+    if (Object.keys(syncUrls).length > 0) {
+      setUrls((prev) => ({ ...prev, ...syncUrls }));
+    }
+
+    if (idsToFetch.length === 0) return;
+
+    void getPhotoThumbs(idsToFetch).then((thumbMap) => {
       if (!alive) return;
-      const next: Record<string, string> = {};
-      for (const photo of list) {
-        const blob = thumbMap.get(photo.id) ?? photo.thumb ?? null;
-        if (!blob) continue;
-        const had = made.current.get(photo.id);
-        if (had && had.blob === blob) {
-          next[photo.id] = had.url;
-        } else {
-          if (had) URL.revokeObjectURL(had.url);
-          const url = URL.createObjectURL(blob);
-          made.current.set(photo.id, { url, blob });
-          next[photo.id] = url;
+      setUrls((prev) => {
+        const next = { ...prev };
+        for (const photo of list) {
+          const blob = thumbMap.get(photo.id) ?? photo.thumb ?? null;
+          if (blob) {
+            next[photo.id] = cacheObjectUrl(photo.id, blob);
+          }
         }
-      }
-      for (const [id, item] of made.current) {
-        if (id in next) continue;
-        URL.revokeObjectURL(item.url);
-        made.current.delete(id);
-      }
-      setUrls(next);
+        return next;
+      });
     });
 
     return () => {
       alive = false;
     };
-  }, [photos, also]);
-
-  useEffect(
-    () => () => {
-      for (const item of made.current.values()) URL.revokeObjectURL(item.url);
-      made.current.clear();
-    },
-    []
-  );
+  }, [list]);
 
   return urls;
 }