🤖 perf: fix CLS and React long tasks #1004
Merged
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. |
Fix two performance issues identified via Chrome DevTools profiling:
1. Fix layout shift (CLS = 0.39 → <0.1) in ReasoningMessage
- The thinking indicator was conditionally rendered, causing elements
below to shift when it appeared/disappeared
- Now always renders the container and uses CSS height/opacity transitions
- Tracks expanded height with useLayoutEffect for smooth animations
2. Reduce React long tasks (719ms → shorter, interruptible)
- Wrap mergeConsecutiveStreamErrors in useMemo
- Use useDeferredValue for the message list rendering
- Allows React to defer heavy reconciliation during streaming
_Generated with mux_
ammar-agent
force-pushed
the
fix-cls-react-long-tasks
branch
from
3483583 to
69c3965
Compare
ammario
pushed a commit
that referenced
this pull request
Dec 9, 2025
## Summary Fixes a UX issue where there was an occasional delay between sending a message and it appearing in the chat window. During this delay, the input was cleared but the user message wasn't visible anywhere. ### Root Cause `useDeferredValue` (added in #1004 to improve streaming performance) was deferring **all** message list updates, including new user messages. This is correct for streaming deltas (where rapid updates benefit from deferral) but wrong for user-initiated messages (where immediate feedback is expected). ### Fix Compare the message counts between the current and deferred values: - **Count differs** (new message added) → Show immediately - **Count same** (content changes in existing messages) → Defer for performance This preserves the streaming optimization while ensuring user messages appear instantly. ### Testing - `make static-check` ✅ - `make test` on WorkspaceStore ✅ _Generated with `mux`_
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.
Summary
Fix two performance issues identified via Chrome DevTools profiling:
1. Fix Layout Shift (CLS = 0.39 → <0.1)
The thinking indicator in
ReasoningMessagewas conditionally rendered, causing elements below to shift when it appeared/disappeared. This contributed 0.32 to the CLS score alone.Fix: Always render the container and use CSS
height/opacitytransitions instead of conditional rendering. Track expanded height withuseLayoutEffectfor smooth animations.2. Reduce React Long Tasks (719ms → shorter, interruptible)
Chrome profiling showed
performWorkUntilDeadlinerunning for up to 719ms during message list updates, blocking the main thread.Fix:
mergeConsecutiveStreamErrorsinuseMemofor memoizationuseDeferredValuefor the message list renderingTesting
make typecheck✅make lint✅Generated with
mux