d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-03-05 22:17:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance accessibility for loading indicators in ClaudeStatus component

Browse Source
This commit is contained in:
Haileyesus
2026-03-04 20:43:57 +03:00
parent 62d0b9f7f2
commit 20832fccb8
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/chat/view/subcomponents/ClaudeStatus.tsx
View File

@@ -150,11 +150,18 @@ export default function ClaudeStatus({
<p className="truncate text-sm font-semibold text-foreground sm:text-[15px]"> <p className="truncate text-sm font-semibold text-foreground sm:text-[15px]">
{cleanStatusText} {cleanStatusText}
{isLoading && <span className="text-primary">{animatedDots}</span>} {isLoading && (
<span aria-hidden="true" className="text-primary">
{animatedDots}
</span>
)}
</p> </p>
<div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground sm:text-xs"> <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-muted-foreground sm:text-xs">
<span className="inline-flex items-center -ml-2 rounded-full border border-border/70 bg-background/60 px-2 py-0.5"> <span
aria-hidden="true"
className="inline-flex items-center -ml-2 rounded-full border border-border/70 bg-background/60 px-2 py-0.5"
>
{elapsedLabel} {elapsedLabel}
</span> </span>
</div> </div>