React ThinkingIndicator component

Preview

<ThinkingIndicator showElapsed />

Usage

Use when

An assistant is working on a reply
An agent runs a plan of steps and you want to show where it stands

Avoid when

A generic wait with a known place for the result: use Loading or Skeleton
Determinate progress: use Progress

Implementation notes

One waiting pattern: the work wash and the label sheen, never dots or a pulse
Keep it mounted when work stops so the region can say it finished
Steps carry their state in a mark and in words: a ring waits, a dot works, a tick is done, a danger glyph and "Failed:" failed
Fold long plans behind "N of M done"

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import ThinkingIndicator once, then compose its parts with dot notation.

ThinkingIndicator.Steps
ThinkingIndicator.Step

Examples

Finished

The row stays and says it finished.

<ThinkingIndicator active={false} doneLabel="Thought for 12s" />

Plan

A plan under the live line, folded behind its count.

<ThinkingIndicator label="Checking the request…">
  <ThinkingIndicator.Steps label="Plan" foldable>
    <ThinkingIndicator.Step label="Read the request" status="complete" />
    <ThinkingIndicator.Step label="Scan changed files" status="pending">12 of 40 files</ThinkingIndicator.Step>
    <ThinkingIndicator.Step label="Write the summary" />
  </ThinkingIndicator.Steps>

Failed step

A failed step says so in words beside the danger glyph.

<ThinkingIndicator active={false} doneLabel="Stopped">
  <ThinkingIndicator.Steps>
    <ThinkingIndicator.Step label="Read the request" status="complete" />
    <ThinkingIndicator.Step label="Fetch the pull request" status="error" />
  </ThinkingIndicator.Steps>
</ThinkingIndicator>

API reference

Component props
Prop	Type	Default	Description
`active`	`boolean \| undefined`	`true`	Whether the assistant is still working; when false the row stays and shows doneLabel
`children`	`React.ReactNode`	Not set	ThinkingIndicator.Steps (label, foldable, defaultOpen) holding ThinkingIndicator.Step (label, status idle\|pending\|complete\|error, detail children)
`doneLabel`	`React.ReactNode`	`Done`	What the row says once work stops
`label`	`React.ReactNode`	`Thinking…`	What the assistant is doing
`showElapsed`	`boolean \| undefined`	`false`	Show how long the work has run, outside the live region; frozen once work stops
`Step.children`	`React.ReactNode`	Not set	Optional detail under the label (a file name, a count).
`Step.label`Required	`React.ReactNode`	Not set	What the step does.
`Step.status`	`StepStatus \| undefinedpendingidleerrorcomplete`	Not set	Where the step stands.
`Steps.children`Required	`React.ReactNode`	Not set	—
`Steps.defaultOpen`	`boolean \| undefined`	Not set	Whether a foldable list starts open.
`Steps.foldable`	`boolean \| undefined`	Not set	Fold the list behind an "N of M done" toggle.
`Steps.label`	`string \| undefined`	Not set	What the list is, read with its count.

Accessibility

The label is a role="status" region that stays mounted; it swaps to doneLabel when work stops
Elapsed time sits outside the region so it is not read every second
The list is an ordered list named with its count; the current step is a status and reads "Now:", finished steps read "Done:"
The sweep and sheen stop under reduced motion; the wash stays

MessagesiblingShow ThinkingIndicator while the assistant reply has not started
ConversationListparentSits at the end of the conversation log
ProgressalternativeUse Progress for determinate progress

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.