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 }
 })