feat: add braille spinner to extension webview streaming indicator

[Githubguy132010]

Context

The CLI implementation introduced an animated Braille spinner component that provides visual feedback during API processing. This PR brings the same visual indicator to the extension's webview UI for consistency and improved user experience.

Previously, the extension displayed static "API Request..." text during streaming. The animated Braille spinner provides smoother, more engaging visual feedback that the system is actively processing.

Implementation

New Component: BrailleSpinner

Created webview-ui/src/components/chat/BrailleSpinner.tsx:

• Animates through 10 Braille Unicode characters: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏
• Updates every 80ms for smooth animation (matches CLI implementation)
• Accepts optional className prop for styling flexibility
• Proper React lifecycle management with interval cleanup on unmount

Integration into ChatRow

Modified webview-ui/src/components/chat/ChatRow.tsx:

• Imported the new BrailleSpinner component
• Updated the API request streaming status display (line ~357) to show the animated spinner before the status text
• The spinner appears when message.type === "api_req_started" and the request is actively streaming

Test Coverage

Created webview-ui/src/components/chat/__tests__/BrailleSpinner.spec.tsx:

• Tests for initial frame rendering
• Tests for frame animation at 80ms intervals
• Tests for loop-back behavior after the last frame
• Tests for custom className prop support
• Tests for proper interval cleanup on component unmount

Architectural Notes

The implementation follows the same pattern as the CLI's ThinkingSpinner component:

• Same Unicode characters and animation interval for visual consistency
• Simple, focused component with a single responsibility
• Proper cleanup to prevent memory leaks
• No dependencies beyond React

Screenshots

Before	After
Static "API Request..." text	Animated Braille spinner ⠋ ⠙ ⠹ ... with status text

The spinner cycles smoothly through the Braille characters, providing continuous visual feedback during API processing.

How to Test

1. Open the extension in VS Code with this branch
2. Send a message that triggers an API request (any question that requires Claude to process)
3. Observe the status indicator in the chat area while processing:
   • You should see the animated Braille character (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏...) cycling before "API Request..."
   • The animation should be smooth at 80ms per frame
   • The spinner should stop once the API response completes
4. Verify the animation by:
   • Sending multiple requests to confirm consistent behavior
   • Checking that the spinner properly cleans up after requests complete
   • Confirming the spinner doesn't appear in other contexts

Additional Testing (Optional)

• Run the test suite: npm test -- BrailleSpinner.spec.tsx
• All tests should pass without errors

Get in Touch

Feel free to reach out on Discord on @thomas0374

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 9d2c3b78672e6ed7df7b853b1f3e0e407aa73115

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

[Githubguy132010]

@mcowger What do you think of this PR?

[mcowger]

I like it.