let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): animate reading indicator dots

Browse Source
This commit is contained in:
Peter Steinberger
2026-01-05 17:40:10 +00:00
parent ad6bec4612
commit 196eb86e38
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -19,6 +19,7 @@
- Docs: clarify auth storage, migration, and OpenAI Codex OAuth onboarding. - Docs: clarify auth storage, migration, and OpenAI Codex OAuth onboarding.
- Sandbox: copy inbound media into sandbox workspaces so agent tools can read attachments. - Sandbox: copy inbound media into sandbox workspaces so agent tools can read attachments.
- Control UI: show a reading indicator bubble while the assistant is responding. - Control UI: show a reading indicator bubble while the assistant is responding.
- Control UI: animate reading indicator dots (honors reduced-motion).
- Control UI: stabilize chat streaming during tool runs (no flicker/vanishing text; correct run scoping). - Control UI: stabilize chat streaming during tool runs (no flicker/vanishing text; correct run scoping).
- Status: show runtime (docker/direct) and move shortcuts to `/help`. - Status: show runtime (docker/direct) and move shortcuts to `/help`.
- Status: show model auth source (api-key/oauth). - Status: show model auth source (api-key/oauth).

10
ui/src/styles/components.css
View File

@@ -608,6 +608,7 @@
} }
.chat-reading-indicator__dots > span { .chat-reading-indicator__dots > span {
display: inline-block;
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 999px; border-radius: 999px;
@@ -615,6 +616,7 @@
opacity: 0.55; opacity: 0.55;
transform: translateY(0); transform: translateY(0);
animation: chatReadingDot 1.1s ease-in-out infinite; animation: chatReadingDot 1.1s ease-in-out infinite;
will-change: transform, opacity;
} }
.chat-reading-indicator__dots > span:nth-child(2) { .chat-reading-indicator__dots > span:nth-child(2) {
@@ -629,12 +631,12 @@
0%, 0%,
80%, 80%,
100% { 100% {
opacity: 0.45; opacity: 0.38;
transform: translateY(0); transform: translateY(0) scale(0.92);
} }
40% { 40% {
opacity: 0.95; opacity: 1;
transform: translateY(-2px); transform: translateY(-3px) scale(1.18);
} }
} }