🤖 perf: fix shimmer frame drops + use requestIdleCallback for streaming #986
+423
−60
Conversation
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
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
ammar-agent
force-pushed
the
fix-shimmer-frame-drops-thinking
branch
12 times, most recently
from
5e4d310 to
d041654
Compare
…orms The Shimmer component was using motion/react with backgroundPosition animation which runs on the main thread and causes significant frame drops during 'Thinking' state when the UI is already under load. Changed to CSS transform animation which runs on the compositor thread: - Removed motion/react dependency from shimmer component - Use translateX transform instead of backgroundPosition - Render text twice: base layer (dimmed) + sliding highlight layer - Added text-shimmer keyframe animation to globals.css This matches the approach already used for CompactionBackground shimmer. _Generated with mux_
ammar-agent
force-pushed
the
fix-shimmer-frame-drops-thinking
branch
from
d041654 to
e961f7d
Compare
Replace fixed 32ms debounce timer with requestIdleCallback for delta event coalescing. This adapts to actual CPU availability: - Fast machines get more frequent UI updates - Slow machines naturally throttle without dropping data - 100ms timeout ensures updates happen even under sustained load The idle callback approach is more robust across different hardware since it uses the browser's native idle detection rather than a hardcoded frame budget.
ammar-agent
changed the title
ammar-agent
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Problem
The
Shimmercomponent was usingmotion/reactwithbackgroundPositionanimation which runs on the main thread, causing significant frame drops during "Thinking" state when the UI is already under load from streaming.Solution
1. GPU-accelerated shimmer via Web Worker
Replaced motion/react with a Web Worker + OffscreenCanvas approach:
2. Adaptive streaming updates via requestIdleCallback
Replaced fixed 32ms debounce timer with
requestIdleCallback:Files Changed
src/browser/workers/shimmerWorker.ts- NEW: Web Worker for off-thread animationsrc/browser/components/ai-elements/shimmer.tsx- Rewritten with canvas + workersrc/browser/stores/WorkspaceStore.ts- requestIdleCallback for delta coalescingGenerated with
mux