fix(ui): finish showcase store batching (PAGE 60 → 5, INITIAL_BATCHES 12)

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) <noreply@anthropic.com>
This commit is contained in:
2026-05-30 14:53:24 -04:00
parent adeee64a2d
commit 1eefed9ab3
+20 -4
View File
@@ -3,7 +3,13 @@ import { ref, computed } from 'vue'
import { useApi } from '../composables/useApi.js' import { useApi } from '../composables/useApi.js'
import { useAsyncAction } from '../composables/useAsyncAction.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', () => { export const useShowcaseStore = defineStore('showcase', () => {
const api = useApi() 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 = [] images.value = []
seen.clear() seen.clear()
exhausted.value = false 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) const hasMore = computed(() => !exhausted.value)
@@ -35,5 +51,5 @@ export const useShowcaseStore = defineStore('showcase', () => {
() => !loading.value && images.value.length === 0 && error.value === null () => !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 }
}) })