AI Elements
Loader
The spinning radial loader the chat shows while the model thinks. Sized in pixels.
packages/design-system/components/ai-elements/loader.tsx
Examples
Thinking
Anatomy
- 01Wrapper, animate-spin
- 02Eight strokes in currentColor, fading round
Usage
import { Loader } from "@repo/design-system/components/ai-elements/loader";
{status === "submitted" ? <Loader /> : null}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 16 | Width and height, in pixels. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Show it between sending and the first streamed token.
Don't
- Keep it once text is streaming; the text is the progress.