ThinkingIndicator

Setup

import { ThinkingIndicator } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`active`	`boolean`	`true`	Whether thinking is active
`label`	`string`	`Thinking...`	Status text
`variant`	`enumdotspulsespinner`	`dots`	Animation style
`showElapsed`	`boolean`	`false`	Show elapsed time
`steps`	`array`	Not set	Multi-step progress array

Usage Guidelines

When to use

AI is processing a request and generating a response
Need visual feedback during async AI operations
Want to show multi-step progress for complex AI tasks
Indicating streaming is about to begin

When not to use

Simple loading states (use Progress or Skeleton)
Form submission loading (use Button loading state)
Page-level loading (use Progress or Skeleton)

Best practices

Use active prop to control visibility
Choose variant based on context (dots for chat, spinner for actions)
Enable showElapsed for longer operations
Use steps for multi-step AI workflows (tool calls, research)

Accessibility

Uses role="status" and aria-live="polite"
Provides aria-label for screen readers
Animations respect prefers-reduced-motion
Elapsed time uses tabular numbers for stability

Messagesibling

Show ThinkingIndicator while waiting for assistant message

ConversationListparent

Typically placed at bottom of ConversationList

Progressalternative

Use Progress for determinate progress

Setup

Examples

Dots (Default)

Pulse

Spinner

With Elapsed Time

Multi-Step Progress

With Error Step

Custom Label

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Dots (Default)

Pulse

Spinner

With Elapsed Time

Multi-Step Progress

With Error Step

Custom Label

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components