feat(ui): add five-bar SessionSpinner for active session indicators#54
Conversation
Replace the ring spinner with a staggered bar spinner in session rows, worktree tabs, and the center header while agent runs are in flight. Co-authored-by: Cursor <cursoragent@cursor.com>
📝 WalkthroughWalkthroughA new ChangesSessionSpinner Introduction and Rollout
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)Not applicable — this change is a UI component swap without multi-component request/response or orchestration flow. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![amazon-q-developer[bot]](https://avatars.githubusercontent.com/in/1220912?s=60&v=4){kind=small}
There was a problem hiding this comment.
The implementation is clean and follows React best practices. The new SessionSpinner component is properly typed with TypeScript, includes accessibility attributes, and is correctly integrated across all affected files. The changes maintain the existing Spinner component for other use cases (e.g., the "Revalidating" indicator), demonstrating good separation of concerns.
All imports are correct, no logic errors detected, and the animation implementation using staggered delays is sound.
You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/renderer/components/ui/SessionSpinner.tsx (2)
28-53: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
{...props}spread afterstylecan silently break sizing.
style={{ width: sizePx, height: sizePx }}is set before{...props}, so any caller passing astyleprop (allowed sinceSessionSpinnerPropsextendsComponentProps<'div'>) will fully overwrite the sizing style rather than merge with it. No current call site passesstyle, but the type signature invites it.🔧 Proposed fix to merge caller style
<div role="status" aria-label="Loading" className={cn('relative inline-block', className)} - style={{ width: sizePx, height: sizePx }} {...props} + style={{ width: sizePx, height: sizePx, ...props.style }} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/renderer/components/ui/SessionSpinner.tsx` around lines 28 - 53, The `SessionSpinner` root `<div>` currently sets sizing via `style={{ width: sizePx, height: sizePx }}` before spreading `props`, so a caller-provided `style` from `SessionSpinnerProps` can overwrite the spinner dimensions. Update `SessionSpinner` to merge the incoming `style` prop with the internal width/height styles instead of letting `{...props}` replace them, preserving the computed size while still allowing caller customizations.
42-49: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPrefer Tailwind color-token classes over inline CSS-variable styles.
The bar color is set via inline
stylereferencingvar(--color-accent)/var(--color-base)rather than a Tailwind utility class. This bypasses the utility-class approach used elsewhere and risks drifting off the approved token set if the underlying CSS variables change independently of the Tailwind theme.🎨 Proposed fix using theme-token classes
<div + className={invert ? 'bg-base' : 'bg-accent'} style={{ - backgroundColor: invert ? 'var(--color-base)' : 'var(--color-accent)', width: barWidth, height: barHeight, borderRadius: '9999px', }} />As per coding guidelines,
src/renderer/**/*.{ts,tsx,css}should "Use the approved theme tokens (bg-base,bg-surface,text-fg, etc.) and avoid hardcoded off-palette colors, gradients, and light-mode styling."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/renderer/components/ui/SessionSpinner.tsx` around lines 42 - 49, The spinner bar in SessionSpinner should use Tailwind theme-token classes instead of inline CSS-variable styles. Update the bar rendering logic in SessionSpinner to replace the current style-based backgroundColor with approved utility classes (for example, using bg-base/bg-accent variants selected via the existing invert prop), while keeping the dynamic width/height/borderRadius behavior unchanged. Ensure the fix stays within the component’s existing className/style structure and references the same invert, barWidth, and barHeight logic.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/renderer/components/ui/SessionSpinner.tsx`:
- Around line 28-53: The `SessionSpinner` root `<div>` currently sets sizing via
`style={{ width: sizePx, height: sizePx }}` before spreading `props`, so a
caller-provided `style` from `SessionSpinnerProps` can overwrite the spinner
dimensions. Update `SessionSpinner` to merge the incoming `style` prop with the
internal width/height styles instead of letting `{...props}` replace them,
preserving the computed size while still allowing caller customizations.
- Around line 42-49: The spinner bar in SessionSpinner should use Tailwind
theme-token classes instead of inline CSS-variable styles. Update the bar
rendering logic in SessionSpinner to replace the current style-based
backgroundColor with approved utility classes (for example, using
bg-base/bg-accent variants selected via the existing invert prop), while keeping
the dynamic width/height/borderRadius behavior unchanged. Ensure the fix stays
within the component’s existing className/style structure and references the
same invert, barWidth, and barHeight logic.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8f9ade06-dc32-4cfd-a8aa-dac53e31287f
📒 Files selected for processing (5)
src/renderer/components/ui/SessionSpinner.tsxsrc/renderer/components/ui/index.tssrc/renderer/features/sessions/SessionRow.tsxsrc/renderer/features/sessions/WorktreeTabs.tsxsrc/renderer/features/workspace/CenterWorkspace.tsx
1 participant
Summary
Test plan
Made with Cursor
Summary by CodeRabbit
New Features
Accessibility
Visual Improvements