diff --git a/apps/web/src/components/SidebarV2.tsx b/apps/web/src/components/SidebarV2.tsx index f918480e1a5..f84c54a3338 100644 --- a/apps/web/src/components/SidebarV2.tsx +++ b/apps/web/src/components/SidebarV2.tsx @@ -502,13 +502,17 @@ const SidebarV2Row = memo(function SidebarV2Row(props: { ? { label: "Working", icon: "working" as const, - className: - "animate-sidebar-working-text text-sky-600 motion-reduce:animate-none dark:text-sky-400", + // No shimmer: a label that animates forever is noise in a sidebar + // full of them (and repaints every vsync on high-refresh displays). + // Working is a background state, so it rests at the dim end of what + // the old pulse cycled through; only the thread you have open gets + // the label at full strength. + className: cn("text-sky-600 dark:text-sky-400", !props.isActive && "opacity-75"), } : status === "monitoring" ? { - // Steady label, no duty-cycled shimmer: monitoring is calm - // background presence, not active progress (monitoring-pill D6). + // Monitoring is calm background presence, not active progress + // (monitoring-pill D6), so it keeps the label at full strength. label: "Monitoring", icon: null, className: "text-sky-600 dark:text-sky-400", diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 54b3b5c0ce6..3108ef2171b 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -146,7 +146,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil compositor updates discrete frames instead of every vsync. */ --animate-status-pulse: status-pulse 2s infinite; --animate-status-ping: status-ping 2s infinite; - --animate-sidebar-working-text: sidebar-working-text 3.4s infinite; --color-warning-foreground: var(--warning-foreground); --color-warning: var(--warning); --color-success-foreground: var(--success-foreground); @@ -223,21 +222,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil scale: 2; } } - @keyframes sidebar-working-text { - 0%, - 36% { - opacity: 1; - animation-timing-function: steps(10); - } - 50%, - 86% { - opacity: 0.75; - animation-timing-function: steps(10); - } - 100% { - opacity: 1; - } - } } @layer base {