Pathfinderby Commenda
AI elements

Thinking indicator

An accessible live mark while the assistant works.

CompleteCompleteCompleteThinking…

Usage

Example.tsx
import { ThinkingIndicator } from '@commenda/pathfinder/thinking-indicator';

<ThinkingIndicator
  variant="orb"
  size={32}
  label="Thinking…"
  showLabel={!hasContent}
/>;

Live activity

Thinking…Thinking…Thinking…Thinking…

Use Start/Finish activity to exercise streaming updates. New run resets disclosure intent.

API reference

PropTypeBehavior
variant"orb"|"dots"Rings by default; hidden Figma avatar/globe variants are excluded
size24|32|4032 in a Thinking row; 40 for a standalone chat mark
labelstringAccessible status, defaults to Thinking…
showLabelbooleanDefault true; hide after first step or word while retaining the orb
activebooleanDefault true; false renders a still
classNamestringLayout override

Design rules

  • THINKING-01: Figma 599:7 / 599:28306: approved dotted rings and typing dots only; sizes 24/32/40. Default row 32, Label13 pearl800, gap4.
  • THINKING-02: Remove the visible Thinking… label after the first step/word. Keep the orb for the generation; unmount when finished. The host owns this lifecycle.
  • THINKING-03: The canvas loop uses Figma ring counts, radii and tilts, a 1s sine gather, 1.9s cubic growth staggered by 0.3s, and an inner-first 1.8s fold when switching from orb to dots, and stops in background tabs. Reduced motion and inactive states render a still. The status label remains accessible.

Accessibility and integration

The canvas is decorative and hidden from assistive technology. A persistent role="status" label uses polite announcements; showLabel={false} keeps that label available to screen readers. Render one meaningful status per response and do not replace its label with every streamed token. Reduced motion and active={false} produce a still, with the same accessible text. There are no interactive controls in ThinkingIndicator itself.

The application owns requests, cancellation, approval, retries, durations, and history persistence. No AI SDK provider is required. See AI content integration for migration mappings; consumer migration is outside this phase.

On this page