perf(staged): pause offscreen animations and drop static will-change from timeline rows#775
Merged
Conversation
The static `will-change: transform` permanently promoted every `.timeline-row` to its own GPU layer, forcing a backing store per row. This is the source of the large ~1s "Composite" spike observed on project switch in Staged. The row has no transform animation or transition anywhere — it only animates `background-color` on :hover — so the promotion is a no-op that costs GPU memory and compositing work for no benefit. Removing it leaves the hover transition working unchanged, with no composited layer. Signed-off-by: Matt Toohey <contact@matttoohey.com>
These always-on requestAnimationFrame loops kept the compositor running at ~60fps even when nothing visible was moving, keeping the layer tree warm and worsening the project-switch render spike. SineWave.svelte ran a rAF loop recomputing a 64-segment SVG path every frame, once per running/building app across several views. Gate the loop on document visibility (visibilitychange) and viewport intersection (IntersectionObserver on the root <svg>) so it pauses while the tab is hidden or the wave is scrolled off-screen, and resumes when visible. Also reduce the path from 64 to 32 segments — overkill at the ~20px render size — halving per-frame path work with no visible change. GitTreeAnimation.svelte (splash) gets the same visibilitychange gating so its canvas loop pauses while the document is hidden, resetting frame timers on resume to avoid a dt jump. Existing onMount/onDestroy cleanup is preserved. Together these flatten the idle compositing baseline. Signed-off-by: Matt Toohey <contact@matttoohey.com>
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.
Summary
SineWave,GitTreeAnimation) when the elements aren't visible, avoiding wasted rAF work and rendering.will-change: transformfrom timeline rows (TimelineRow), which was forcing unnecessary compositing layers.These changes reduce render/CPU overhead from animations and layout that aren't actively needed.