pnpm add @wandercom/design-system-web

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…".

<ChatThinking />

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.

<ChatThinking>Searching listings…</ChatThinking>
<ChatThinking duration={3.5}>Recrafting…</ChatThinking>
<ChatThinking duration={1.2}>Working on it…</ChatThinking>

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.

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