KQ-749 · LATENCY/BAR
Latency Bar
A slim bar that fills while waiting for the first token and then snaps to done. The fill follows an asymptote smoothed on glide, so it rises fast and never finishes on its own; the first token snaps it full on snap and draws a check on flick, the time reads beside it in tabular digits, and a wait past the warn line turns the bar and readout amber with the word slow. The host passes state and elapsed time from its own clock.
KQ-749 · LATENCY/BAR
Fernworks Model 30.00 s
Idle · ready
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/latency-bar
Props
- state
- "idle" | "waiting" | "done"
- default "idle"
- Where the wait is.
- elapsedMs
- number
- default 0
- Milliseconds since the request, from the host's clock; freeze it at done.
- budgetMs
- number
- default 1200
- Sets the fill curve, t / (t + budgetMs / 4).
- warnAfterMs
- number
- default 2000
- Past this the bar and readout turn warn and the readout gains the word slow.
- typicalMs
- number
- default —
- Draws a tick on the track at the typical wait.
- label
- string
- default —
- What is being waited on; names the timer.
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "waiting" | "done" | "idle" | Where the wait is. |
| elapsedMs | number | 0 | Milliseconds since the request, from the host's clock; freeze it at done. |
| budgetMs | number | 1200 | Sets the fill curve, t / (t + budgetMs / 4). |
| warnAfterMs | number | 2000 | Past this the bar and readout turn warn and the readout gains the word slow. |
| typicalMs | number | — | Draws a tick on the track at the typical wait. |
| label | string | — | What is being waited on; names the timer. |