Message Typing

Three pulsing dots shown while a reply is pending. Place it where the reply will appear, so the answer replaces the indicator in the same spot.

Usage

Render it as a transcript row while waiting, and drop the row once the reply lands.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { MessageTyping } from "@e-infra/design-system"

{status === "streaming" && (
  <MessageScrollerItem messageId="typing">
    <Message align="start">
      <MessageAvatar>
        <Avatar>
          <AvatarFallback>AI</AvatarFallback>
        </Avatar>
      </MessageAvatar>
      <MessageContent>
        <Bubble variant="muted">
          <BubbleContent>
            <MessageTyping />
          </BubbleContent>
        </Bubble>
      </MessageContent>
    </Message>
  </MessageScrollerItem>
)}

As a normal row it inherits the transcript's entrance animation, and autoscroll follows it like any other message.

Colour

The dots are painted with currentColor, so they take the colour of the bubble they sit in.

Labelling

The dots are decorative and hidden from assistive technology. A visually hidden label carries the meaning, so pick one that describes what is happening.

1
<MessageTyping label="Searching the knowledge base" />

Pair it with busy on MessageScrollerContent, which sets aria-busy on the transcript so the log is announced as still being written.

1
<MessageScrollerContent busy={status === "streaming"}>

Props

Reduced motion

The pulse is suppressed under prefers-reduced-motion, leaving three static dots.

Related

Message Input drives the streaming status, and Message Scroller hosts the row.