Replace static “API Request” label with customizable, animated “Generating…” indicator (with emoji + random mode) #7523
Description
What specific problem does this solve?
🔍 What specific problem does this solve?
The current "API Request" label:
- Feels visually outdated and mechanical.
- Takes up space without adding value.
- Breaks immersion in the chat flow.
- Can’t be customized or styled.
For users who care about expressive, modern UI (like Cursor or Notion-style assistants), this label becomes a repetitive distraction. It’s a missed opportunity for delight.
👥 Who is affected?
- All Roo Code users.
- Especially those who:
- Use the chat interface frequently.
- Value aesthetic, immersive UI.
- Want a more assistant-like experience.
🕒 When does this happen?
- Every time a request is sent.
"API Request"remains visible until the response is complete and after it.
✅ Current vs Expected Behavior
Current:
"API Request"appears statically until response ends.
Expected:
- Replace with a low-opacity, pulsing status text like
"Generating...". - Text disappears as soon as the first token is generated.
- A subtle separator appears between responses.
- Status reappears for the next request.
Additional context (optional)
No response
Roo Code Task Links (Optional)
No response
Request checklist
- I've searched existing Issues and Discussions for duplicates
- This describes a specific problem with clear impact and context
Interested in implementing this?
- Yes, I'd like to help implement this feature
Implementation requirements
- I understand this needs approval before implementation begins
How should this be solved? (REQUIRED if contributing, optional otherwise)
1. Customizable Status Text
- Default:
"Generating...". - Presets:
"Thinking...","Hmm...","Working on it...","Cooking up magic...". - Users can define their own phrases in settings.
2. Random Mode
- Cycles through preset + user-defined phrases every few seconds (default: 5s).
- Interval is user-configurable.
- Adds personality and surprise to the UI.
3. Emoji Mode
- Optional emoji appears before status text.
- Randomized from a predefined pool:
- 🤔 Thinking
- 🧠 Brainstorming
- ⏳ Loading
- ✨ Magic
- 🐍 Python vibes
- 🔮 Summoning
- Users can add their own emojis.
- Emoji syncs with status text or rotates independently.
4. Visual Style
- Opacity pulse between 10% and 30%.
- Smooth fade-in/out transitions.
- Matches theme colors.
- Separator between responses is clean, minimal, and non-distracting.
- The changes happen smoothly by the existing moving up, and fading out while that, and the new one entering from the bottom and fading in.
- A new appearance tab would be great for this implementation and future UI enhancements.
How will we know it works? (Acceptance Criteria - REQUIRED if contributing, optional otherwise)
- Given a user sends a request
When the request is pending
Then a pulsing status text appears instead of"API Request"
And it disappears when the first token is received
And a subtle separator appears between responses
And the status reappears for the next request
And users can customize the text, emojis, and cycle interval
Technical considerations (REQUIRED if contributing, optional otherwise)
- Replace static label with animated component.
- Use CSS keyframes for pulsing effect.
- Respect theme (light/dark) and accessibility contrast.
- Store user-defined phrases/emojis in extension settings.
- Ensure emoji/text rotation doesn’t impact performance.
Trade-offs and risks (REQUIRED if contributing, optional otherwise)
- Slight increase in UI complexity.
- Need to ensure animation is not distracting (option to disable).
- Must avoid performance hits on slower machines.
- Should be tested across themes and screen sizes.