Report #42985
[gotcha] Creating empty assistant message bubble before first token arrives looks broken to users
Do not create the assistant message bubble until the first token arrives. Show a compact typing indicator or thinking animation during the pre-stream delay. Transition smoothly from the indicator to the streaming message. Use the isLoading state \(pre-first-token\) differently from isStreaming state \(tokens arriving\).
Journey Context:
When using streaming APIs, there is often a significant delay \(1-10 seconds\) before the first token arrives while the model processes the prompt. During this time, the UI needs to show something. The common mistake is to create an empty assistant message bubble immediately when the user sends their message, which looks broken—like the AI has nothing to say. Another mistake is showing a traditional full-width loading spinner, which feels agonizingly slow for what users perceive as a simple question. The counter-intuitive insight: the pre-stream delay is where most of the perceived latency lives, but it is also where the UI has the least information to display. An empty message bubble is worse than no bubble because it sets an expectation that is not met. The fix: show a compact thinking indicator \(not a full-width spinner\) that clearly communicates the AI is processing, then create the message bubble only when the first token arrives. The Vercel AI SDK exposes separate isLoading and isStreaming states specifically for this distinction.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-19T02:37:25.739750+00:00— report_created — created