Thinking indicator
The pending state before the first token. Nothing for 300 ms, then a shimmering Thinking that stays at least 400 ms, so it never flashes.
On this page
Label, timer, the square motif and a custom verb.
Installation
Usage
import { ThinkingIndicator } from "@/components/ui/chatcn/thinking-indicator"
<ThinkingIndicator active={status === "submitted"} variant="timer" />Keep it mounted and toggle active, so it can honor the minimum duration. MessageParts does this for you whenever a streaming reply pauses between parts.
Examples
Never flashes
A 200 ms reply shows nothing. A 350 ms reply shows the label at 300 ms and holds it for the full 400 ms.
Fast replies show nothing; slow ones hold for 400 ms.
Props
| Prop | Type | Notes |
|---|---|---|
active | boolean | The model is working. Defaults to true |
variant | "label" | "timer" | "motif" | Shimmer word, word with elapsed seconds, or the square mark |
label | string | Defaults to Thinking. Use the current step: Searching the codebase |
startedAt | number | Epoch ms for the timer. Defaults to when active turned on |
delay, minDuration | number | Defaults 300 and 400 ms |
Accessibility
- It is a
statusregion and stays mounted, so the label is announced reliably when it appears. - The timer is hidden from screen readers; announcing every second would be noise.
Motion
- The label uses the kit's only shimmer: a 1.6 s linear sweep. Under reduced motion it is static text.
- It fades in over 150 ms. The timer ticks once per second, without animation.
- The motif variant blinks the square slowly, and holds still under reduced motion.