Typing Indicator

Usage#

import { TypingIndicator } from "neelam-ui";
 
{isGenerating ? <TypingIndicator label="Assistant is typing…" /> : null}

It is styled to match Bubble's incoming shape directly, because it sits exactly where that bubble will land.

The label is the announcement#

There is no visible text, so label is what assistive tech reads. It defaults to "Typing…" — pass something specific when the UI knows who:

<TypingIndicator label="Jane is typing…" />

Announcing itself#

TypingIndicator carries role="status", so it announces on its own. That is the opposite of Skeleton, which is explicitly aria-hidden and leaves announcing to whatever wraps a whole batch of them.

The difference is cardinality: there is normally exactly one typing indicator, for whoever is currently typing, so it is the live status. A screen of skeletons is one loading state rendered many times, and announcing each would be a barrage.

Keyboard#

Accessibility#

• role="status" implies aria-live="polite", so the label is announced without interrupting whatever the user is doing.
• The three dots are aria-hidden. They are decoration; label carries the meaning.
• The bounce animation is dropped entirely under prefers-reduced-motion (WCAG 2.3.3) — the dots simply sit still, and the status still announces.
• The staggered animationDelay is inline style rather than three classes, which keeps the dot count a loop rather than hand-written markup.

API reference#

Also accepts every native <div> attribute.