Skip to content

fix: stop Browse infinite-scroll cascade; unify masonry gallery layout - #161

Merged
KazeKaze93 merged 2 commits into
masterfrom
fix/masonry-consolidate-virtuoso-item-classes
Aug 13, 2026
Merged

fix: stop Browse infinite-scroll cascade; unify masonry gallery layout#161
KazeKaze93 merged 2 commits into
masterfrom
fix/masonry-consolidate-virtuoso-item-classes

Conversation

@KazeKaze93

@KazeKaze93 KazeKaze93 commented Aug 13, 2026

Copy link
Copy Markdown
Owner

Summary

  • Remove Virtuoso atBottomStateChange + allPosts.length tail-f pump from useGalleryInfiniteScroll / Browse. Downward pagination is endReached only (same path ArtistGallery already used). Sticky atBottom=true was cascading booru:search on a static UI in both grid and masonry.
  • Shared useMasonryInfiniteScroll for overflow-auto masonry in all five galleries (300px threshold, 150ms debounce, leave-zone ref guard).
  • Single createVirtuosoGridFactories for all five galleries; masonry items w-full mb-4 break-inside-avoid; leftover flex-wrap w-[calc(...)] removed from factory Item.

Diagnosis (four rounds)

Each round found something real. None of the first three was the root.

  1. CSS class drift across five gallery copies. True finding (flex-wrap w-[calc(...)] vs columns-correct w-full mb-4 break-inside-avoid; Artist pb-32). Not the fetch cascade. Handler bodies vs origin/master were byte-identical; that check missed the call site wiring masonry scroll into the Virtuoso at-bottom contract.

  2. "Masonry-specific scroll cascade." Also real: five copies of handleMasonryScroll, Browse reused handleAtBottomStateChange / scheduleLoadMore on overflow-auto. Incomplete: the pump lived in the shared hook and kept running after switching back to grid, and on a static UI.

  3. "atBottomRef sticks after visiting masonry." Partially true (the ref is never reset on view change or Virtuoso unmount). Incomplete: default viewType is grid; the cascade reproduced without ever entering masonry. Grid hid the symptom (windowing does not re-render new indices at unchanged scrollTop); masonry showed it (O(n) DOM).

  4. Root: tail-f is the wrong abstraction for downward infinite scroll. atBottomStateChange is documented as tail-f (pin to bottom, load newer items). Browse appends existing pages when the user scrolls down. That is endReached, which the other four galleries already used without this pump. "It compiles and fires" was not semantic fit.

Lesson recorded in .ai/LESSONS.txt under Library API semantics.

Test plan

  • Browse grid: search with many posts, do not scroll — Main log must not repeat booru:search
  • Browse masonry: same; pages load only on real scroll
  • Switch grid ↔ masonry several times — no cascade
  • Scroll to end in both modes — one extra page per gesture; hasNextPage stops at real end
  • ArtistGallery / Favorites / Updates / PlaylistGallery grid+masonry — no pagination regression
  • npm run validate / npm test (already green locally: 45 files / 307 tests)

@KazeKaze93
KazeKaze93 merged commit a7f0a67 into master Aug 13, 2026
1 check failed
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