Typing Indicators That Follow Live Token Streams

§1 A typing indicator should reflect the live reply

A typing indicator tells someone that their message reached your application and a reply is on its way. In an AI chat interface, you can connect that signal to the actual response stream instead of running a timer that guesses when the assistant will finish.

The simplest design has two parts: show a waiting indicator while the request is pending, then replace it with the answer as text arrives. This makes the interface feel responsive without pretending that the model is literally typing.

§2 Tokens arrive as pieces, not complete messages

A token is a small unit of text that a model processes. It might represent a word, part of a word, or punctuation. With streaming enabled, your application receives incremental updates rather than waiting for the entire answer.

However, one stream event is not necessarily one token. An update can contain several text fragments, metadata, or no visible text at all. Build the indicator around meaningful response events, not a count of network chunks.

Many AI APIs deliver these updates using server-sent events, or SSE. SSE carries a sequence of events over a long-lived HTTP response. Your SDK may parse those events for you, leaving your application to handle each update.

§3 Four states keep the typing indicator predictable

Start with a small state machine: a clear set of statuses and rules for moving between them. You do not need a complicated animation system.

• – Idle: No request is active, so the typing indicator stays hidden.
• – Waiting: The user has submitted a message, but no visible answer text has arrived.
• – Streaming: Answer text is arriving and being added to the assistant message.
• – Finished or interrupted: The response ended, failed, or was canceled, so the indicator stops.

Move into the waiting state immediately after submission. When the first nonempty text fragment arrives, remove the waiting dots and reveal the growing answer. You can keep a subtle activity marker beside the message until completion, but avoid showing two competing indicators.

§4 Connect stream events to the message on screen

Keep the accumulated answer separate from the request status. For each text update, append its content to the answer buffer and refresh the displayed message. Ignore empty updates when deciding whether visible text has started.

In an OpenAI-style chat completion stream, visible text commonly appears in a delta content field. Other event types and API formats use different structures. Check the endpoint documentation rather than assuming every event contains displayable text.

Mark the response finished when your SDK reports successful completion. If the connection closes unexpectedly before a valid completion signal, treat that as an interruption rather than silently presenting a partial answer as complete.

§5 Use a backend relay for the streaming request

Send the browser request to your own backend, and let that backend call the AI provider. This keeps your API key out of client-side code. Your server can forward incremental text or normalized events to the browser as they arrive.

Fluxio is a practical option for this setup: it is a streaming-first, pay-per-token AI API relay with access to multiple models through one key. Its OpenAI-compatible base URL is https://api.fluxioapi.com/v1. You can use an OpenAI SDK to request a streamed reply, with a model such as Gemini 2.5 Flash, and connect the resulting updates to the same interface states.

Check that your hosting platform and proxy do not buffer the entire response. A correct indicator cannot display live text if the infrastructure holds every update until the request finishes.

§6 Handle pauses, cancellation, and accessible updates

A quiet stream does not always mean failure. Use a configurable timeout for prolonged inactivity, and show a neutral message such as “Still waiting for the reply” rather than claiming measurable progress.

If the user presses Stop, cancel the upstream request where supported, preserve any received text, and label the answer as stopped. Give each request an identifier so late events from an older request cannot change the current indicator.

For accessibility, announce status changes politely instead of making a screen reader announce every fragment. Respect reduced-motion preferences, and test empty replies, midstream errors, and rapid consecutive submissions.

Sign up for Fluxio to build your first streaming reply.