diff --git a/ui/src/index.css b/ui/src/index.css index 807a1100..625da487 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -294,26 +294,28 @@ } } -/* Shimmer text effect for active "Working" state */ +/* Shimmer text effect for active "Working" state — Cursor-style sweep */ @keyframes shimmer-text-slide { - 0% { background-position: 200% center; } - 100% { background-position: -200% center; } + 0% { background-position: -100% center; } + 100% { background-position: 200% center; } } .shimmer-text { - --shimmer-base: hsl(var(--foreground) / 0.75); - --shimmer-highlight: hsl(var(--foreground) / 0.3); + --shimmer-base: hsl(var(--foreground)); + --shimmer-highlight: hsl(var(--foreground) / 0.35); background: linear-gradient( - 110deg, - var(--shimmer-base) 35%, + 90deg, + var(--shimmer-base) 0%, + var(--shimmer-base) 40%, var(--shimmer-highlight) 50%, - var(--shimmer-base) 65% + var(--shimmer-base) 60%, + var(--shimmer-base) 100% ); - background-size: 250% 100%; + background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - animation: shimmer-text-slide 2.5s ease-in-out infinite; + animation: shimmer-text-slide 2s linear infinite; } @media (prefers-reduced-motion: reduce) { diff --git a/ui/src/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx index f752fa90..fa9a889b 100644 --- a/ui/src/pages/IssueChatUxLab.tsx +++ b/ui/src/pages/IssueChatUxLab.tsx @@ -17,7 +17,7 @@ import { issueChatUxTranscriptsByRunId, } from "../fixtures/issueChatUxFixtures"; import { cn } from "../lib/utils"; -import { Bot, Brain, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react"; +import { Bot, Brain, FlaskConical, Loader2, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react"; const noop = async () => {}; @@ -216,6 +216,43 @@ export function IssueChatUxLab() { + +
+
+
+ Active run — shimmer +
+
+ + + Working + + for 12s +
+
+
+
+ Completed run — static +
+
+ + + + + Worked + + for 1 min 24s +
+
+
+
+