ChatThinking

A single-line shimmer indicator for the assistant "thinking" state in a chat transcript

Installation

pnpm add @wandercom/design-system-web

Usage

5 lines
import { ChatThinking } from '@wandercom/design-system-web/ui/chat-thinking';

export function Example() {
  return <ChatThinking />;
}

ChatThinking is a pure-CSS component — no client hooks, safe in Server Components. It renders a <span> with a tertiary-to-primary gradient clipped to the text glyphs and animated via background-position. Default copy is "Thinking…".

Default

Loading example...
1 lines
<ChatThinking />

Custom message and duration

Pass any ReactNode as children to override the label, and tune the duration prop (in seconds) for a faster or slower wipe. The default cycle is 2s.

Loading example...
3 lines
<ChatThinking>Searching listings…</ChatThinking>
<ChatThinking duration={3.5}>Recrafting…</ChatThinking>
<ChatThinking duration={1.2}>Working on it…</ChatThinking>

Accessibility

The indicator is a polite live region — role="status" with aria-live="polite" — so screen readers announce the thinking state without interrupting the user. Under prefers-reduced-motion: reduce, the shimmer is suppressed and the label falls back to a flat text-tertiary color so the message is still legible.

Avoid mounting more than one ChatThinking per transcript at a time — multiple polite live regions queue announcements and can confuse assistive tech.

Props

children?:

ReactNode
The shimmering label. Defaults to "Thinking…" when omitted.

duration?:

number
Length of one full shimmer cycle in seconds. Defaults to 2.

className?:

string
Additional CSS classes to apply.

All other ComponentProps<'span'> are forwarded to the underlying element.

ChatThinking