Thinking
Okami at work on a reply (after beautifului.dev's thinking trace): the glass orb and a line saying what it's doing — Thinking, then each step by name as it starts, rising in with a band of light across it (transitions.dev's thinking states). The steps open beneath while it works; done, it settles into how long it took, folded, the steps a tap away. Having only thought, it leaves nothing behind.
With steps
<Thinking
working={!replyStarted}
steps={[{ id, label: t("steps.check_availability"), done }]}
labels={{ label, thinking: t("thinking"), thought: (s) => t("thought", { seconds: s }) }}
/>Only thinking
<Thinking working labels={labels} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| working | boolean | — | Still working: no words of the reply yet. False, it settles. |
| steps | { id, label, done }[] | [] | What it's done and is doing, in the reader's language. The last one not done names the line. |
| seconds | number | measured | How long it took; measured from mounting when left out. |
| labels | { label, thinking, thought(seconds) } | — | Copy in the reader's language; label is for assistive tech. |
Guidelines
- One per reply, above it, only for the reply arriving now — never for a thread read back.
- Name steps by what they mean to the reader (Checking free times), never by the tool behind them.
- It stands in for TypingIndicator in a chat; TypingIndicator stays for a wait that isn't a reply (reading a file).