ux(showcase): smooth one-at-a-time cadence + earlier infinite-scroll trigger
Operator-flagged 2026-05-30 (round 2): the batched-loads change improved consistency but still felt "chunky" — 5 items appeared together, then a ~200 ms API round-trip pause, then another 5. And infinite-scroll fired too late when a single tall image (long manga page) made one masonry column much taller than its siblings. **Cadence (showcase store):** - Fire all INITIAL_BATCHES fetches in PARALLEL — collapses the per- batch round-trip gap so all the data arrives in ~1 RTT instead of 12 sequential RTTs. - Trickle each response's items into images.value one at a time with APPEND_DELAY_MS = 80ms between each (≈ the MasonryGrid stagger animation, 70ms). User sees a smooth steady stream. - fetchPage (the infinite-scroll path) uses the same trickle so its 5-item appends also cascade one-by-one instead of popping together. - Sequence token guards against a fast shuffle / mount-then-shuffle interleaving two trickles into the same images.value. - Dropped useAsyncAction here — the parallel-fetch-then-trickle flow doesn't fit its single-wrap-call shape cleanly; inline loading/error state is clearer. **Infinite-scroll trigger (MasonryGrid):** - Pass `rootMargin: '2400px'` to useInfiniteScroll (was the 600px default). The masonry sentinel sits at the bottom of the container, whose height = MAX(column heights). A tall image in one column pushes the sentinel ~2× viewport below where the user is actually reading (the bottom of the SHORTER columns). 2400px ≈ 2-3 screen-heights of pre-emptive trigger, comfortable for typical tall manga heights. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -79,9 +79,18 @@ function aspectStyle(item) {
|
||||
return { aspectRatio: `${w} / ${h}` }
|
||||
}
|
||||
|
||||
// Larger rootMargin than the composable default (600px) because the
|
||||
// sentinel sits at the BOTTOM of the masonry container, whose height is
|
||||
// the MAX of the column heights. A single tall image (long manga page,
|
||||
// panorama) in one column pushes the sentinel way past the visible
|
||||
// bottom of the SHORTER columns — the user reads the short-column
|
||||
// bottoms long before the sentinel comes into view, and load-more
|
||||
// fires too late. 2400px ≈ 2-3 screen-heights of pre-emptive trigger,
|
||||
// comfortably covering typical tall-image heights. Operator-flagged
|
||||
// 2026-05-30.
|
||||
useInfiniteScroll(sentinelEl, () => {
|
||||
if (props.hasMore && !props.loading) emit('load-more')
|
||||
})
|
||||
}, { rootMargin: '2400px' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user