Marble UI
← Components

Thinking Loader

Preview: Shimmer

Indicator while a model works before the first token. Announced politely; motion stops for reduced-motion users.

Import

import { ThinkingLoader } from '@marbleui/ui'

Props

<ThinkingLoader>

PropTypeDefaultDescription
classNamestring—
labelstring'Thinking'
variant'shimmer' | 'pulse' | 'dots''shimmer'

Usage notes

Shows the model is working before the first token arrives. Put it at the end of ChatConversation, after the user’s message, and replace it with the assistant ChatMessage once text streams in. If the model streams a trace the reader can open, use Reasoning.

{status === 'waiting' && <ThinkingLoader />}
{status === 'searching' && <ThinkingLoader variant="pulse" label="Searching 12 sources" />}
  • label defaults to “Thinking”. An ellipsis is added for you, so leave it out.
  • It’s a polite role="status" region, so changing label (say, from “Searching” to “Writing”) is announced without moving focus.
  • variant is shimmer (default), dots or pulse. Animation stops for reduced-motion users, and the shimmer becomes plain muted text.
  • Include it in ChatConversation’s contentKey, or the log won’t scroll down to show it.
Example source · show
import { ThinkingLoader } from './thinking-loader'

export const styles = {
  Shimmer: () => <ThinkingLoader />,
  Dots: () => <ThinkingLoader variant="dots" label="Writing" />,
  Pulse: () => <ThinkingLoader variant="pulse" label="Searching 12 sources" />,
}

Source: packages/ui/src/thinking-loader/thinking-loader.tsx

Catalog

Category
ai-agents
Priority
Pro
Primitive
custom