mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: the terminal message box has a placeholder and a spinner instead of a label and a sent line

Browse source 
The label 'message <agent>' is the input's placeholder (the label stays for
screen readers). The send button shows a spinner over its label while the
request is pending and keeps its width, and the 'sent' line is gone: the box
empties when the message is held. Spinner is a component of its own now, used
by the button and the refresh picker.
This commit is contained in:
iris 2026-11-06 19:37:26 +01:00 • committed by mara
commit c37205e8f5
2 changed files with 103 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/packages/swarm-ui/src/ui/spinner/Spinner.css Normal file
View file

@ -0,0 +1,26 @@
.ui-spinner {
display: inline-block;
box-sizing: border-box;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ui-spinner-turn 0.8s linear infinite;
}
@keyframes ui-spinner-turn {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.ui-spinner {
animation: none;
}
}
:root[data-motion="reduce"] .ui-spinner {
animation: none;
}
:root[data-motion="allow"] .ui-spinner {
animation: ui-spinner-turn 0.8s linear infinite;
}

10
frontend/packages/swarm-ui/src/ui/spinner/Spinner.tsx Normal file
View file

@ -0,0 +1,10 @@
// <Spinner> — a small ring that turns while a request is in flight: the
// refresh picker's clock slot, a button waiting on its request. It is one
// character wide and tall (`1em`), takes the colour of the text around it, and
// is hidden from assistive tech; whatever holds it says the state (`aria-busy`,
// a label). Where motion is off it is a static arc.
import "./Spinner.css";
export function Spinner() {
return <span class="ui-spinner" aria-hidden="true" />;
}