Usage
import { ThinkingLoader } from "@/registry/components/thinking-loader/thinking-loader";
<ThinkingLoader />Props
| Name | Type | Default | Description |
|---|---|---|---|
| phases | string[] | ["Thinking", "Searching the web", "Reading sources", "Writing response"] | Labels to walk through, one after another |
| interval | number | 2200 | Time per phase in ms when the phase isn't controlled |
| phase | number | Controlled index into phases – the timer stops and the loader shows this phase | |
| loop | boolean | false | Start over after the last phase instead of holding it |
| done | boolean | false | Turns the spinner into a check and the label into doneLabel; setting it back to false starts over |
| doneLabel | string | ((seconds: number) => string) | (s) => Thought for ${s}s | Label once done – a function gets the seconds since the loader started |
| size | "sm" | "md" | "md" | 28 or 34px tall |
| variant | "pill" | "plain" | "pill" | A bordered capsule, or just the spinner and the label |
| className | string | Extra class on the root |
When to use
- The wait between sending a prompt and the first streamed token – one line that says what the model is doing - Agent and pipeline steps with real labels: searching, reading, running a tool, writing - Inline in a chat bubble or next to a button where a full panel would be too much
When not to use
Generic page loading (bars-spinner, shimmer-loader).