From 1eefed9ab345f3db1d7cfe4cafe2ed75d9de9f78 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Sat, 30 May 2026 14:53:24 -0400 Subject: [PATCH] =?UTF-8?q?fix(ui):=20finish=20showcase=20store=20batching?= =?UTF-8?q?=20(PAGE=2060=20=E2=86=92=205,=20INITIAL=5FBATCHES=2012)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The showcase-store change in adeee64 didn't actually land — only gallery.js + ShowcaseView.vue made it into the commit. Without this, ShowcaseView mounts loadInitial() which doesn't exist yet, so the showcase blows up. Landing the matching store edit now. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/stores/showcase.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/frontend/src/stores/showcase.js b/frontend/src/stores/showcase.js index 2b93d3d..5e7686e 100644 --- a/frontend/src/stores/showcase.js +++ b/frontend/src/stores/showcase.js @@ -3,7 +3,13 @@ import { ref, computed } from 'vue' import { useApi } from '../composables/useApi.js' import { useAsyncAction } from '../composables/useAsyncAction.js' -const PAGE = 60 +// Operator-confirmed 2026-05-30: instead of one 60-item request, fetch +// PAGE-sized chunks sequentially so items render as each batch lands +// rather than blocking on the full 60-item response. Total initial count +// is unchanged (PAGE * INITIAL_BATCHES = 60). Infinite-scroll also pulls +// PAGE items per trigger so subsequent appends stay progressive too. +const PAGE = 5 +const INITIAL_BATCHES = 12 export const useShowcaseStore = defineStore('showcase', () => { const api = useApi() @@ -23,11 +29,21 @@ export const useShowcaseStore = defineStore('showcase', () => { }) } - async function shuffle() { + // Reset state and fetch INITIAL_BATCHES chunks in sequence. Used by + // mount, the Shuffle button, and the R-key handler — all want the + // same progressive-cascade behavior. + async function loadInitial() { images.value = [] seen.clear() exhausted.value = false - await fetchPage() + for (let i = 0; i < INITIAL_BATCHES; i++) { + if (exhausted.value) break + await fetchPage() + } + } + + async function shuffle() { + await loadInitial() } const hasMore = computed(() => !exhausted.value) @@ -35,5 +51,5 @@ export const useShowcaseStore = defineStore('showcase', () => { () => !loading.value && images.value.length === 0 && error.value === null ) - return { images, loading, error, hasMore, isEmpty, fetchPage, shuffle } + return { images, loading, error, hasMore, isEmpty, fetchPage, shuffle, loadInitial } })