feat(sidebar): add grid loader indicator for active sessions (#158)

Replace the subtle pulse animation with a visible 3x3 grid loader
that appears before the session name when a session is actively
processing. This provides clearer visual feedback of session activity.

- Add new GridLoader component (pure CSS, no dependencies)
- Show loader in sidebar when session phase is 'busy' or 'cooldown'
This commit is contained in:
Nils
2026-01-16 18:48:57 +02:00
committed by GitHub
parent 93d7dec66b
commit 288f0ff29f
3 changed files with 55 additions and 6 deletions
@@ -27,6 +27,7 @@ import {
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import { GridLoader } from '@/components/ui/grid-loader';
import {
RiAddLine,
RiArrowDownSLine,
@@ -1117,12 +1118,10 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
>
{}
<div className="flex items-center gap-2 min-w-0 flex-1">
<span
className={cn(
'truncate typography-ui-label font-normal text-foreground',
isStreaming && 'animate-pulse [animation-duration:1.8s]'
)}
>
{isStreaming ? (
<GridLoader size="xs" className="text-primary flex-shrink-0" />
) : null}
<span className="truncate typography-ui-label font-normal text-foreground">
{sessionTitle}
</span>