Repository navigation
perf(app): skip layout and paint of rows out of sight - #83
Merged
Merged
Conversation
The chat and a crew's messages keep every loaded page in the DOM, and each new row or streamed draft re-laid them all out. Rows out of sight now use content-visibility: auto, with the size they last had, so the browser skips them until they scroll near. The 8 newest rows are left out, since cards arrive there with a glow that paint containment clips.
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
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.
Second performance round, slice 4.
What
The chat (
ChatView) and a crew's message timeline (Timeline) keep every page loaded so far ("Load earlier" never trims), with no virtualization. Each new row, and each streamed draft update, re-ran layout over all of them.New
app/src/offscreen.cssgivescontent-visibility: autoto the rows of any list markedoffscreen-rows.contain-intrinsic-size: auto 120pxmeans a row that was rendered once keeps its real height, so the scrollbar does not jump. Chromium (WebView2) then skips layout and paint for rows out of sight until they scroll near.The 8 newest rows are left out on purpose:
attentionglow, a 14 px box-shadow. The paint containment that comes withcontent-visibilitywould clip it.This is pure CSS: no list component changed besides a class name. The spec (section 15, after the polls note) describes it.
Checks
pnpm check: 44 files, 258 tests pass.pnpm devpreview with FakeBotloft, I sent 14 multi-line messages to Scout (18 rows):content-visibility: autoand the last 8 keptvisible;Manual check (real Claude)
In a long real chat (several "Load earlier" pages), scroll up and down quickly. Rows appear without blank flashes, the view does not jump, and "Load earlier" keeps the reading position.