perf(sidebar): windowed session list — only mount the visible row window - #626
Draft
Nuctori wants to merge 1 commit into
Draft
perf(sidebar): windowed session list — only mount the visible row window#626Nuctori wants to merge 1 commit into
Nuctori wants to merge 1 commit into
Conversation
The 2000+ session catalogue rendered every <SessionItem/> eagerly, so first paint paid for 2003 DOM nodes plus 2003 hover/rename/delete state machines. Switch the list to a fixed-height (54px) window: ResizeObserver measures the scroll viewport, a rAF-throttled onScroll computes the visible window, and translateY positions the slice. Empty/loading/error states render unaffected. The first paint shows a small slice; scroll mounts the next window. No new dependency.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Windowed session list. The sidebar mounts at most the visible window of
SessionItemrows plus a small overscan; the rest are flattened bytranslateY. Empty / loading / error states are unchanged.SESSION_LIST_ITEM_HEIGHT = 54everySessionItemalready rendersat exactly this height (existing constant inside the component).
ResizeObserveron the scroll container keepslistViewportHin syncwith layout changes (sidebar resize, font-size change, browser zoom).
onScrollis rAF-throttled: a frame may receive manyscrolleventsbut emits at most one
setListScrollTopper frame.ResizeObserverhas not yet measured(
listViewportH === 0), the slice uses a 600 px window guess. It isreplaced on the first observer callback, before the user can scroll.
Why
The 2003-session catalog at #599 was a known regression: each
SessionItemallocates its own hover / rename / delete state machines, and the parent
mounts all of them on the first paint. With L1 reducing the route to
~100 ms but the sidebar still rendering 2003 cards, the user feels no
overall speedup. This is the complementary client-side fix.
No new dependencies
package.json/package-lock.jsonreact-window/react-virtual/ similarcomponents/SessionSidebar.tsx(+81 / -21)Audit (self)
origin/main(28bab3c), ahead 0 before this PRnode_modules/.bin/tsc --noEmit)(no e2e/, no lib/, no .github/**)
Stacked plan (each PR base=main, merge-order-free)
perf/bench— independent perf-bench jobperf/l1-scanner— fingerprint memoizationperf/l3-sidebar— windowed listperf/l2-tail— strictly stacked on P2 (depends on the newscanner); will be cut from main once P2 lands
perf/l4-context— strictly stacked on P2; will be cut frommain once P2 lands
Local evidence
On the local 1992-session catalog, before this PR the first paint of
the sidebar mounts 1992 React subtrees; after this PR it mounts roughly
viewport / 54 pxitems (typically 6–20) plus an 8-row overscan.