feat: add optional Roo loading animation

[jmalmo]

Related GitHub Issue

Closes: #8747

Roo Code Task Context (Optional)

Description

This PR adds an optional jumping kangaroo animation as an alternative to the default spinner in progress indicators. Users can toggle this preference in Settings > UI section.

Key implementation details:

1. KangarooLoader Component (webview-ui/src/components/chat/KangarooLoader.tsx)

   • Inline SVG-based animation (no external dependencies)
   • Fixed 16px size to match VSCodeProgressRing
   • 0.7s bounce animation with smooth easing
   • Uses currentColor for theme compatibility

2. State Management

   • Added useKangarooAnimation: boolean to GlobalSettings schema
   • Full persistence through existing state management system
   • Proper backend-to-webview sync via ExtensionState

3. UI Integration

   • ProgressIndicator conditionally renders based on setting
   • Settings toggle in UI tab with descriptive text
   • Default remains standard spinner (no breaking changes)
   • i8n keys added and all locales updated with translations

Test Procedure

Test setting persistence:

1. Open Settings > UI
2. Enable "Use Jumping Kangaroo Animation"
3. Click Save, then Done
4. Reopen Settings - verify checkbox remains checked ✓
5. Close and reopen VSCode - verify setting persists ✓

Test animation in action:

1. Start a new task
2. Observe progress indicator during "API Request...", command executions, MCP server operations, context condensing and browser session actions.
3. Should show jumping kangaroo (when enabled) or spinner (when disabled)
4. Try toggling setting and starting new tasks to verify both states work

Test theme compatibility:

1. Switch between light/dark themes
2. Animation should remain visible and properly colored

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Video of the UI settings toggle and the animation showing in the different chat-related components:

Close-up demo:

Also works nice with light mode:

Documentation Updates

No documentation updates are required.
Rationale: This is a self-explanatory UI setting that users can discover in Settings. No changes to user-facing documentation needed.

Additional Notes

The kangaroo SVG path is inline (not an external asset) for optimal performance
Animation duration of 0.7s was chosen based on testing for smooth, non-distracting motion
Default remains the standard spinner to avoid surprising existing users
This aligns with "Enhanced User Experience" from the roadmap by giving users UI customization options

Get in Touch

Discord: lillelord9379

---

Important

Adds an optional kangaroo animation for progress indicators, allowing users to switch from the default spinner, with updates to UI components, state management, and i18n.

• Behavior:
  • Adds KangarooLoader component in KangarooLoader.tsx for a jumping kangaroo animation as an alternative to the default spinner.
  • Animation is SVG-based, 16px size, 0.7s bounce duration, and uses currentColor for theme compatibility.
  • Users can toggle this animation in Settings > UI.
• State Management:
  • Introduces useKangarooAnimation boolean in global-settings.ts and ClineProvider.ts for state persistence.
  • Syncs setting between backend and webview via ExtensionState.
• UI Integration:
  • ProgressIndicator.tsx conditionally renders kangaroo animation based on user setting.
  • Adds toggle option in SettingsView.tsx and UISettings.tsx.
• i18n:
  • Updates i18n files for multiple locales to include new kangaroo animation setting descriptions.

^{This description was created by for 52c1b95. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

✅ Review Complete - No Issues Found

This PR has been reviewed and no issues were identified. The implementation is clean and follows best practices:

What Was Reviewed

• ✅ State management implementation (global settings schema, context sync)
• ✅ Component architecture (KangarooLoader, ProgressIndicator)
• ✅ UI integration (Settings toggle, conditional rendering)
• ✅ i18n coverage (all 18 locales updated)
• ✅ Type safety and TypeScript usage
• ✅ Backward compatibility (defaults to false)
• ✅ Code quality and consistency with codebase patterns

Summary

The kangaroo loading animation feature is well-implemented with:

• Proper state persistence across sessions
• Clean separation of concerns
• No breaking changes to existing functionality
• Complete internationalization support
• Performant inline SVG animation

This PR is ready to merge. Great work! 🦘