library: the screen reads the catalogue back when a batch lands, not on a 700ms timer, and a tile keeps the object URL it was given

docker/frontend/src/engine/library.ts

@@ -320,6 +320,12 @@ export interface ScanProgress {
   total: number;
   done: number;
   added: number;
+  // How many frames have reached the catalogue. `done` counts the frames the
+  // reading has got to, which is nearly all of them long before they are stored,
+  // so a screen that read the catalogue back on `done` would read it again every
+  // frame — and reading it back means every thumbnail in it again. This moves a
+  // batch at a time, which is exactly when there is something new to read.
+  written: number;
   // How many frames the scan has read out of each row of the tree, keyed the way
   // the tree spells a row (`folder` for the picked folder, `folder/sub/dir` for
   // the rest) and counted the way the rows count: a frame sits on its own row and
@@ -478,10 +484,13 @@ export async function scanFolder(
     total: 0,
     done: 0,
     added: 0,
+    written: 0,
     dirs: [],
     counts: {},
   };
   progress.folder = folder.name;
+  // A position written down by an older visit has no count to carry on from.
+  progress.written ??= 0;
   const found = new Set(progress.dirs.map((d) => d.id));
   const counts: Record<string, number> = progress.counts;
   // Count the frame the moment the scan gets to it, before it knows whether the
@@ -538,6 +547,7 @@ export async function scanFolder(
       tx.oncomplete = () => resolve();
       tx.onerror = () => reject(tx.error);
     });
+    progress.written += rows.length;
     write();
   };
   // One frame, end to end: its bytes, its tile, its shutter time, and the row the
@@ -848,7 +858,7 @@ export function startScan(folder: LibraryFolder): Promise<ScanProgress> {
   if (live) return Promise.reject(new Error('a scan is already running'));
   const session: ScanSession = {
     folder: folder.name,
-    progress: { folder: folder.name, total: 0, done: 0, added: 0, dirs: [], counts: {} },
+    progress: { folder: folder.name, total: 0, done: 0, added: 0, written: 0, dirs: [], counts: {} },
     stop: false,
     jump: null,
   };