Components · AI
Thinking Indicator
Shows the assistant is working before the first token arrives: a morphing shape and a shimmering label.
import { ThinkingIndicator } from '@nexub/react';Usage
The gap between sending a prompt and the first token of the reply.
Tool calls or retrieval steps inside a reply, with a label naming the step.
Once text is streaming: StreamingText’s caret already shows progress. Replace the indicator, don’t stack them.
General loading outside AI surfaces: use Spinner or Skeleton.
Examples
Default
Custom label and sizes
Name the step when you know it. `label={null}` keeps only the shape.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | null | messages.thinking ('Thinking') | Visible text. null hides it; "Thinking" is still announced. |
| size | 'sm' | 'md' | 'md' | Shape and text size. |
| messages | Partial<{ thinking: string }> | — | Local override for the default text. |
Accessibility
ARIA roles
Screen reader
A polite live region: the label is announced once when it mounts. Changing the label announces the new step.
Render it only while waiting and remove it when tokens start, so it is not announced again.
Notes
With reduced motion the shape and shimmer are static.
On iOS & Android
Web only