Add ThinkingSpinner Component to Webview Extension

[Githubguy132010]

Context

This PR adds an animated thinking spinner to the webview UI, mirroring the implementation already deployed in the CLI. The spinner provides visual feedback to users when the AI is actively processing requests, making the interface feel more responsive and keeping users informed about ongoing operations.

The spinner uses 10 Braille Unicode characters (⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏) that animate at 80ms per frame, providing a smooth, accessible loading indicator that works across all terminals and browsers without requiring external assets.

Implementation

Changes Made

1. New ThinkingSpinner Component

• Created /webview-ui/src/components/chat/ThinkingSpinner.tsx
• Uses React hooks (useState, useEffect) for frame animation
• Automatically cycles through 10 Braille frames
• Properly cleans up intervals on unmount to prevent memory leaks
• Accepts optional className prop for custom styling
• Fully tested with 5 comprehensive test cases

2. Enhanced ProgressIndicator Component

• Modified /webview-ui/src/components/chat/ProgressIndicator.tsx to accept useSpinner prop
• When useSpinner=true: displays the new ThinkingSpinner with VSCode foreground color
• When useSpinner=false (default): displays the existing VSCode progress ring
• Maintains backward compatibility - existing code works unchanged

3. Integration Points

Updated the following components to show the spinner during active operations:

• ChatRow.tsx: Shows spinner during API streaming when no cost data is available yet
• BrowserSessionRow.tsx: Shows spinner when browser is actively browsing and streaming
• Command execution and MCP server responses automatically benefit from spinner integration

Program Flow

1. When the extension detects streaming is active and processing, it passes useSpinner={true} to ProgressIndicator
2. ProgressIndicator renders ThinkingSpinner instead of the default progress ring
3. ThinkingSpinner maintains animation state with frame index, updating every 80ms
4. Animation loops seamlessly through all 10 frames
5. Cleanup occurs automatically when component unmounts

Tradeoffs

• Frame rate: Fixed at 80ms per frame (12.5 fps). This provides smooth animation while keeping CPU usage minimal. Alternative fixed rates were considered (60ms, 100ms) but 80ms best matches the CLI implementation and perceived smoothness.
• Unicode vs SVG: Chose Braille Unicode characters over SVG spinners for zero external dependencies, better accessibility, and consistency with the CLI implementation.
• Styling: Uses inline className prop rather than CSS modules to allow flexible styling from parent components while maintaining component isolation.

Screenshots

before	after
Static VSCode progress ring	Animated Braille spinner with "Thinking..." text

The spinner displays inline with other content, showing: ⠋ Thinking... with the character animating smoothly.

How to Test

Verify Spinner Display

1. Open the Kilo Code extension in VS Code
2. Start a conversation with the AI
3. While the AI is processing (API streaming active):
   • You should see an animated Braille character followed by "Thinking..."
   • The character should smoothly cycle through all 10 frames
   • Animation should feel natural and responsive

Verify Spinner in Different Contexts

1. API Requests: Send a message and watch for the spinner during initial processing
2. Browser Actions: If browser mode is active, verify spinner shows during navigation/clicks
3. Command Execution: Watch spinner animate while commands are executing

Verify Backward Compatibility

1. Existing code paths without explicit useSpinner={true} should use the default progress ring
2. No visual regressions in existing UI

Verify Cleanup

1. Start/stop multiple API requests in sequence
2. Check browser DevTools console - should see no memory leaks or interval errors
3. Component should properly clean up intervals on unmount

Testing Coverage

Automated test suite validates:

• ✅ Component renders with initial frame (⠋)
• ✅ Animation advances through frames correctly (80ms intervals)
• ✅ All 10 frames cycle and loop properly
• ✅ className prop is applied correctly
• ✅ Intervals are cleaned up on component unmount

Run tests with:

pnpm test webview-ui/src/components/chat/__tests__/ThinkingSpinner.spec.tsx

Get in Touch

This PR completes the spinner implementation across the entire application. Feel free to reach out on Discord (handle: thomas07374) if you have questions about the implementation or want to discuss any adjustments to the animation timing, styling, or integration points.

---

Branch: add-spinner-to-extension
Commit: Add ThinkingSpinner component to webview (1f6ba1d)
Based on: Latest main (after add-spinner-to-cli merge)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3ded5c9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR