Skip to content

Window the gallery to a sliding page buffer - #3

Merged
RayHCai merged 1 commit into
masterfrom
gallery-windowing
Aug 24, 2026
Merged

RayHCai merged 1 commit into
masterfrom
gallery-windowing

Conversation

@RayHCai

@RayHCai RayHCai commented Aug 24, 2026

Copy link
Copy Markdown
Owner

The gallery held every page ever scrolled through: useInfiniteQuery accumulated pages with no cap, and each append rebuilt ~7 full-set derived structures (groups, id->index map, justified layout) over the entire loaded library. Memory grew unbounded and per-append work grew O(n), so the tab slowed then crashed on large libraries.

Switch to a bounded sliding window:

  • useShellData: offset-addressed pageParams + getPreviousPageParam + maxPages, so React Query evicts the far page as you scroll. Exposes windowStart, fetchPreviousPage, hasPreviousPage.
  • shellPaging: page size 2000 -> 300, WINDOW_PAGES=5 (~1500 items held max); seekWindowOffsets replaces the prefix-fill seek helpers.
  • GalleryGrid: re-anchor scrollTop by the exact row-height delta when the window slides (evict-above/prepend) so content never jumps; top-edge lookahead mirrors the bottom one.
  • seekToIndex rebuilds the window around the target instead of filling a contiguous prefix from index 0.
  • useTimelineScrollbar: window-relative index math (global = windowStart
    • local) so the scrubber stays honest to the whole library while only a window is loaded.

No height estimation: every height used is exact from the justified layout. Typecheck, lint, and all tests pass.

The gallery held every page ever scrolled through: useInfiniteQuery
accumulated pages with no cap, and each append rebuilt ~7 full-set
derived structures (groups, id->index map, justified layout) over the
entire loaded library. Memory grew unbounded and per-append work grew
O(n), so the tab slowed then crashed on large libraries.

Switch to a bounded sliding window:
- useShellData: offset-addressed pageParams + getPreviousPageParam +
  maxPages, so React Query evicts the far page as you scroll. Exposes
  windowStart, fetchPreviousPage, hasPreviousPage.
- shellPaging: page size 2000 -> 300, WINDOW_PAGES=5 (~1500 items held
  max); seekWindowOffsets replaces the prefix-fill seek helpers.
- GalleryGrid: re-anchor scrollTop by the exact row-height delta when the
  window slides (evict-above/prepend) so content never jumps; top-edge
  lookahead mirrors the bottom one.
- seekToIndex rebuilds the window around the target instead of filling a
  contiguous prefix from index 0.
- useTimelineScrollbar: window-relative index math (global = windowStart
  + local) so the scrubber stays honest to the whole library while only
  a window is loaded.

No height estimation: every height used is exact from the justified
layout. Typecheck, lint, and all tests pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Aug 24, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
photos Ready Ready Preview Aug 24, 2026 8:28pm

@RayHCai
RayHCai merged commit 448cad1 into master Aug 24, 2026
6 of 7 checks passed
@RayHCai
RayHCai deleted the gallery-windowing branch August 24, 2026 20:28

This branch was successfully deployed

1 active deployment
Preview c71b22b0 Deployed Aug 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant