Merge pull request #3789 from rommapp/posthog-code/v2-gallery-per-card-fetch

revert(v2): hydrate gallery cards per-card via /roms/{id}/simple

Author: gantoine

frontend/src/v2/components/Gallery/GalleryShell.vue

@@ -551,26 +551,23 @@ const currentLetter = computed<string>(() => {
   return "";
 });
 
-// Viewport-driven fetch. The shell collects the positions currently in
-// view (rows in `viewportRange`) and hands them to the store, which keeps
-// `byPosition` in sync by fetching the 72-item windows those positions
-// fall into. Windows are shared across cards and cached, so a full
-// viewport resolves in a handful of paginated requests rather than one
-// per card. (Fetching per-card instead issued one request plus one DB
-// lookup per visible card, so ~100 simultaneous round-trips on a full
-// grid, which the browser's per-host connection cap then serialized into
-// slow waves on low-power devices.)
-//
-// The store also aborts windows that scrolled out of view, so paging
-// through a large library doesn't leave departed windows downloading.
+// Per-card viewport-driven fetch. The shell tracks which positions are
+// currently visible (from the rows in `viewportRange`) and keeps
+// `byPosition` in sync via per-card `GET /roms/{id}/simple` calls — pure
+// by-id lookups on the backend, much faster than the paginated
+// `getRoms(limit/offset)` pipeline. Each fetch is independent, so covers
+// stream in as their individual responses land.
 //
 // No idle-time prefetch: when the user stops scrolling, no new requests
-// are fired for off-screen positions.
+// are fired. Cards already in the viewport that are still missing keep
+// loading; everything off-screen waits until the user scrolls there.
 //
-// A small debounce on viewport changes prevents request storms during
-// smooth scrolling: only when the viewport settles for
-// `FETCH_DEBOUNCE_MS` do we sync.
+// Cancellation: positions that leave the viewport while their fetch is in
+// flight are aborted via `cancelFetchAt`. A small debounce on viewport
+// changes prevents fire-and-cancel storms during smooth scrolling — only
+// when the viewport settles for `FETCH_DEBOUNCE_MS` do we sync.
 const FETCH_DEBOUNCE_MS = 80;
+const visiblePositions = new Set<number>();
 let fetchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 let pendingRange: { first: number; last: number } | null = null;
 
@@ -590,7 +587,27 @@ function collectVisiblePositions(range: {
 }
 
 function syncFetches(range: { first: number; last: number }) {
-  galleryRoms.syncVisibleWindows(collectVisiblePositions(range));
+  const next = collectVisiblePositions(range);
+
+  // Cancel positions that left the viewport before their fetch resolved.
+  // The store's per-position controller handles the network abort;
+  // idempotent if nothing was in flight.
+  for (const p of visiblePositions) {
+    if (!next.has(p) && !galleryRoms.byPosition.has(p)) {
+      galleryRoms.cancelFetchAt(p);
+    }
+  }
+
+  // Fire per-card fetches for positions that just entered. The store
+  // dedupes against in-flight + already-loaded internally.
+  for (const p of next) {
+    if (!galleryRoms.byPosition.has(p)) {
+      void galleryRoms.fetchRomAt(p);
+    }
+  }
+
+  visiblePositions.clear();
+  for (const p of next) visiblePositions.add(p);
 }
 
 function scheduleFetchSync(range: { first: number; last: number }) {
@@ -772,10 +789,12 @@ onBeforeUnmount(() => {
   gallerySelection.clear();
   if (searchDebounce) clearTimeout(searchDebounce);
   if (fetchDebounceTimer) clearTimeout(fetchDebounceTimer);
-  // When leaving the gallery entirely, stop any window fetches still
-  // downloading so navigating away mid-scroll doesn't keep the network /
-  // backend busy. Keeps the loaded cache so returning to the same gallery is instant.
+  // When leaving the gallery entirely, stop any per-card fetches still in
+  // flight so navigating away mid-scroll doesn't keep the network /
+  // backend busy. Keeps the hydrated cache so returning to the same
+  // gallery is instant.
   galleryRoms.abortInFlight();
+  visiblePositions.clear();
   inflowResizeObserver?.disconnect();
   inflowResizeObserver = null;
   // Drop the debug stats so the overlay doesn't show stale gallery numbers

frontend/src/v2/components/Gallery/GameListRow.vue

@@ -2,10 +2,13 @@
 // GameListRow — single row of the list-mode gallery.
 //
 // Owns:
-//   * Per-row lazy fetch: onMount fires `fetchWindowAt(position)` and
-//     the store aligns the position to its 72-item window, deduping
-//     against pending + loaded windows, so rows sharing a window share
-//     one request. Mirror of the grid flow, with the same "row mount =
+//   * Per-row lazy fetch: a watch fires `fetchRomAt(position)` whenever
+//     the row is missing its rom but the store knows the id — covering
+//     both mount ("entered the overscan window") and a context refresh
+//     that clears `byPosition` under a still-mounted row. onUnmount aborts
+//     the fetch via `cancelFetchAt(position)` so a fast scroll past
+//     mid-flight doesn't keep server work queued for invisible rows.
+//     Mirror of the per-card grid flow, with the same "row mount =
 //     entered viewport" contract via the shell's RVirtualScroller
 //     overscan window.
 //
@@ -26,7 +29,7 @@ import {
   RSkeletonBlock,
   RTooltip,
 } from "@v2/lib";
-import { computed, onMounted } from "vue";
+import { computed, onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import storePlatforms from "@/stores/platforms";
@@ -261,13 +264,37 @@ function onRowPointerEnd() {
   selectionInput.handlePointerEnd();
 }
 
-onMounted(() => {
-  // Static mode (rom passed as prop) skips the gallery's per-row fetch
-  // entirely — the consumer already owns the rom data.
+// Kick the per-row fetch whenever this position is missing its rom but
+// the store knows its id. This covers both mount ("entered the overscan
+// window") and a context refresh: a filter / search / sort / scan clears
+// `byPosition` and repopulates `romIdIndex`, but the row can stay mounted
+// at the same position — without this watch it would sit on skeletons
+// until it scrolled out and remounted. The store dedupes against
+// in-flight + already-loaded, so re-runs are cheap. Guarding on the id
+// (not just null rom) also re-fetches when a resort lands a different rom
+// at the same position.
+watch(
+  () => {
+    if (isStatic.value || props.position === undefined) return null;
+    if (galleryRoms.byPosition.has(props.position)) return null;
+    return galleryRoms.romIdIndex[props.position] ?? null;
+  },
+  (romId) => {
+    if (romId != null && props.position !== undefined) {
+      void galleryRoms.fetchRomAt(props.position);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
   if (isStatic.value || props.position === undefined) return;
-  // Entered the overscan window, so kick the window fetch. Store aligns
-  // to the window grid and dedupes against pending + loaded windows.
-  void galleryRoms.fetchWindowAt(props.position);
+  // Left the overscan window before the fetch resolved — abort so the
+  // server doesn't keep building a row the user already scrolled past.
+  // Idempotent if nothing was in flight.
+  if (!galleryRoms.byPosition.has(props.position)) {
+    galleryRoms.cancelFetchAt(props.position);
+  }
 });
 </script>