TypingIndicator

Example

The DotMark's think pose — its dots bloomed into a turning sphere — in glass, leaf and lilac, at size-8. It names itself to assistive tech with its label.

import { TypingIndicator } from "@/components/shared/typing-indicator";

<TypingIndicator label="Okami is typing" />

With a word

Given text, a word stands beside the orb with a band of light sweeping across it (.text-shimmer) — the wait said out loud. The label still speaks for assistive tech, so the word stays out of its way. Under reduced motion it holds still, plain and muted.

import { TypingIndicator } from "@/components/shared/typing-indicator";

<TypingIndicator label="Okami is typing" text="Thinking" />

A longer wait

While Okami does work that takes longer than a reply — reading a studio's site or a photo of its price list — the orb takes the loading pose, and the word says what's happening.

import { TypingIndicator } from "@/components/shared/typing-indicator";

<TypingIndicator label="Okami is reading" text="Reading your price list" pose="loading" />

In a conversation

The orb takes the agent's side of the thread while its reply is on the way, rising in with .aura-rise and gone the moment the reply lands.

import { ChatMessage } from "@/components/shared/chat-message";
import { TypingIndicator } from "@/components/shared/typing-indicator";

<ChatMessage from="client">Anything free on Friday?</ChatMessage>
{pending && (
  <div className="flex justify-start">
    <TypingIndicator label="Okami is typing" text="Thinking" className="aura-rise" />
  </div>
)}

API reference

Guidelines

• Use for conversational waits (the agent composing). Dashboard data loads use skeletons or the spinner from generated UI.
• Under prefers-reduced-motion the orb holds still — the state stays visible without the motion.
• One at a time, and only on the agent's side: it stands where the reply will land.