fix: resolve send button flashing issue in webview #7320
Conversation
- Changed transition-all to transition-opacity for more specific animations - Reduced transition duration from 150ms to 100ms for smoother effect - Increased base opacity from 60% to 75% for better visibility - Applied same fixes to all icon buttons to ensure consistency - Fixes intermittent flashing reported in send message button
dosubot
bot
added
size:M
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| "relative inline-flex items-center justify-center", | ||
| "bg-transparent border-none p-1.5", | ||
| "rounded-md min-w-[28px] min-h-[28px]", | ||
| "text-vscode-foreground opacity-85", |
There was a problem hiding this comment.
I notice we're using here for the stop TTS and add images buttons, but other buttons in this file use (lines 1107, 1133). Is this intentional, or should we standardize on one opacity value for consistency across all icon buttons?
| // Removed transition-all to prevent unwanted animations | ||
| "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", | ||
| // Use transition only for specific properties to avoid flashing | ||
| "transition-opacity duration-100", |
There was a problem hiding this comment.
Good fix changing from to ! However, I'm wondering if we should also add to smooth out the background and border color changes on hover? This would maintain smooth transitions without causing the flashing issue.
| "rounded-md min-w-[28px] min-h-[28px]", | ||
| "opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", | ||
| "transition-all duration-150", | ||
| "opacity-75 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground", |
There was a problem hiding this comment.
These buttons use while some others use . Could we pick one standard opacity value for all icon buttons to maintain visual consistency?
| "relative inline-flex items-center justify-center", | ||
| "bg-transparent border-none p-1.5", | ||
| "rounded-md min-w-[28px] min-h-[28px]", | ||
| "text-vscode-foreground opacity-85", |
There was a problem hiding this comment.
This component uses as the base opacity. Since this is the reusable icon button component, whatever opacity we choose here should probably be the standard for all icon buttons. Consider aligning all button opacities with this value.
hannesrudolph
added
the
Issue/PR - Triage
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
|
This has unrelated changes |
github-project-automation
bot
moved this from PR [Needs Prelim Review]
to Done
in Roo Code Roadmap
Summary
Fixes intermittent flashing of the send message button and other icon buttons in the webview UI.
Problem
User reported that the send message button was flashing intermittently in the web view, causing a poor user experience.
Solution
The issue was caused by using
transition-allwith a 150ms duration, which was animating unintended CSS properties and causing visual flashing.Changes Made:
transition-alltotransition-opacityfor more specific, controlled animationsFiles Modified:
webview-ui/src/components/chat/ChatTextArea.tsx- Fixed send button, enhance prompt button, stop TTS button, and add images buttonwebview-ui/src/components/chat/EditModeControls.tsx- Fixed cancel and send buttons in edit modewebview-ui/src/components/chat/IconButton.tsx- Fixed generic icon button componentwebview-ui/src/components/chat/IndexingStatusBadge.tsx- Fixed indexing status buttonTesting
Review Score
Code review confidence: 95% (High Confidence)
Fixes the issue reported via Slack about the send message button flashing intermittently.
Important
Fixes flashing issue of send and icon buttons in webview by adjusting CSS transitions and opacity.
ChatTextArea.tsx,EditModeControls.tsx,IconButton.tsx, andIndexingStatusBadge.tsxby changingtransition-alltotransition-opacity.ChatTextArea.tsx: Adjusts send button, enhance prompt button, stop TTS button, and add images button.EditModeControls.tsx: Adjusts cancel and send buttons in edit mode.IconButton.tsx: Adjusts generic icon button component.IndexingStatusBadge.tsx: Adjusts indexing status button.This description was created by
for 5641c84. You can customize this summary. It will automatically update as commits are pushed.