fix: prevent chat UI flickering during cancel operations and checkpoint restoration (#8677) #8678
+127
−6
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
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=80&v=4){kind=small}
…nt restoration - Added isSoftReloading flag to ClineProvider to track soft reload state - Updated ExtensionMessage interface to include optional isSoftReload property - Modified cancelTask to set/reset soft reload flag around task recreation - Updated checkpointRestoreHandler to use soft reload flag for checkpoint operations - Added UI-side handling in ChatView to check isSoftReload flag and skip re-rendering - Implemented debouncing mechanism (50ms) for state updates to prevent rapid flickering - Cancel button now passes isSoftReload flag to prevent UI flicker This fixes the issue where the chat window would flicker and sometimes duplicate messages when users press Cancel to stop an API response or when restoring checkpoints after editing messages. Fixes #8677
- Add JSDoc documentation for soft reload mechanism - Use proper TypeScript typing instead of 'as any' - Extract STATE_UPDATE_DEBOUNCE_MS as named constant - Add detailed comments explaining the flickering prevention mechanism
dosubot
bot
added
size:L
hannesrudolph
added
the
Issue/PR - Triage
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
This PR fixes the UI flickering issue that occurs when users cancel API responses or restore checkpoints. The flickering was caused by full task recreation triggering complete state refreshes in the React UI.
Problem
When users pressed "Cancel" during an API response or restored a checkpoint, the entire task was recreated from scratch, causing the UI to flicker and sometimes reload completely. This led to:
Solution
Implemented a "soft reload" mechanism that preserves UI state during these operations:
Changes
isSoftReloadingflag to ClineProvider with proper JSDoc documentationSTATE_UPDATE_DEBOUNCE_MSconstant for maintainabilitypostStateToWebview()methodcancelTask()to use soft reload mechanismisSoftReloadproperty to ExtensionMessage interfaceTesting
Fixes #8677
Important
Implements a soft reload mechanism to prevent UI flickering during cancel operations and checkpoint restoration in the chat UI.
ClineProvider.tsto prevent UI flickering during cancel operations and checkpoint restoration.isSoftReloadingflag toClineProviderto track soft reload state.postStateToWebview()to prevent rapid consecutive updates.cancelTask()and checkpoint restoration to use the soft reload mechanism.ChatView.tsxto check forisSoftReloadflag and preserve UI state.ClineProvider.spec.tsandcheckpointRestoreHandler.spec.ts.STATE_UPDATE_DEBOUNCE_MSconstant for maintainability.isSoftReloadproperty toExtensionMessageinterface.This description was created by
for 42385ae. You can customize this summary. It will automatically update as commits are pushed.