fix: improve UI performance and reduce delays in message rendering #8365
Conversation
- Remove unused startTransition import from ChatView - Fix React hooks order violations in QueuedMessages by moving all hooks before conditional returns - Prefix unused parameter with underscore to satisfy linting rules
- Update ChatTextArea highlight debouncing to execute immediately in tests - Update ExtensionStateContext message batching to execute immediately in tests - This fixes test failures while maintaining performance optimizations in production
- Add immediate highlight update for test environment on mount - Duplicate highlight logic in test-specific useLayoutEffect to ensure proper initialization - This fixes failing slash command highlighting tests
dosubot
bot
added
size:XL
hannesrudolph
added
the
Issue/PR - Triage
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| setSelectedMenuIndex(3) // Set to "File" option by default. | ||
| // Set a timeout to debounce the search requests. | ||
| searchTimeoutRef.current = setTimeout(() => { | ||
| // Generate a request ID for this search. |
There was a problem hiding this comment.
[P2] Debounce timer may fire after unmount. Add a cleanup to clear searchTimeoutRef on unmount to avoid stray work and potential setState after unmount.
| highlightLayerRef.current.scrollTop = textAreaRef.current.scrollTop | ||
| highlightLayerRef.current.scrollLeft = textAreaRef.current.scrollLeft | ||
| // Debounce the highlight update | ||
| updateHighlightsDebounced.current = setTimeout(performUpdate, 50) // 50ms debounce for highlight updates |
There was a problem hiding this comment.
[P2] Clear the highlight debounce timer on unmount so no pending work runs after the component is removed.
| updateHighlights() | ||
| }, [inputValue, updateHighlights]) | ||
|
|
||
| // Force immediate highlight update in test environment on mount |
There was a problem hiding this comment.
[P2] Test-only highlight initialization duplicates the logic in updateHighlights(). Prefer reusing updateHighlights() here to keep one source of truth.
| updateTimerRef.current = null | ||
| } else { | ||
| // Set a new timer to batch updates (10ms delay) | ||
| updateTimerRef.current = setTimeout(() => { |
There was a problem hiding this comment.
[P2] Clear the batched update timer (updateTimerRef) on unmount to prevent batched updates from firing after the provider is disposed.
| const query = newValue.slice(lastAtIndex + 1, newCursorPosition) | ||
| setSearchQuery(query) | ||
| // Defer context menu logic to avoid blocking input | ||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
[P3] Consider cancelling requestAnimationFrame on unmount to avoid any stray work if the component is torn down.
Summary
This PR addresses the UI performance delays reported in #8361, where messages were taking ~2 seconds to appear after sending, and there were noticeable delays when starting/canceling tasks or changing configurations.
Problem
The UI was experiencing significant delays due to:
Solution
Implemented several performance optimizations:
1. Message Batching in ExtensionStateContext
2. Context Menu Optimization in ChatTextArea
requestAnimationFrame3. Highlight Updates Optimization
4. Context Value Memoization
Testing
Performance Impact
Fixes #8361
Important
Improves UI performance by batching message updates, debouncing highlight updates, and optimizing context menu logic across multiple components.
ExtensionStateContextwith 10ms debounce to reduce React re-renders.ChatTextAreawith 50ms delay.ChatTextAreausingrequestAnimationFrameto prevent input blocking.ChatViewto 50ms for smoother performance.QueuedMessageIteminQueuedMessagesto prevent unnecessary re-renders.QueuedMessageswith 300ms delay.ChatTextAreaandExtensionStateContext.This description was created by
for 4be2252. You can customize this summary. It will automatically update as commits are pushed.