Skip to content
Tattva

TypingIndicator

Stable

Three pulsing dots that show the assistant is getting ready to reply.

Also known as typing dots, is typing, loading dots

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Default

The default label is "Assistant is thinking".

UsageCodeDesignAccessibility

When to use it

Three pulsing dots in the spot where the reply will appear. They fill the gap between sending a message and the first words, so people know the assistant heard them.

Use it for

  • The moment after a message is sent, until the first words arrive.
  • Beside the assistant's avatar, where the reply will start.

Not for

  • A step you can name, like searching the web: use ShimmerText.
  • Loading that is not the assistant replying: use Spinner.
  • A reply that has started to appear: use Message.

Do and avoid

When does my flight land?
Do. Dots show the assistant heard you while the reply is coming.
Assistant: Your flight lands at 9:40. The hotel lets you check in from 2 pm.
Avoid. Dots left on after the reply starts make it look unfinished.

Do

  • Show it only until the first words appear.
  • Put it in the same spot where the reply will appear.
  • Change the label when the assistant is doing something specific.
  • Use ShimmerText beside it when you can name the step, like a search.

Avoid

  • Do not keep it on screen once the reply starts appearing.
  • Do not use it for loading that is not the assistant. Use Spinner or Skeleton.
  • Do not show several in the same conversation.
  • Do not make the dots lime or amber.

On a phone

  • TypingIndicator is three small dots and looks the same on a phone.
  • It is not tappable. Put it in the message list where the next reply will start, so it does not push content when the reply arrives.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started