AI Agent Thinking Animation in SwiftUI: Honest Motion

Why does AI activity need a vocabulary, not a spinner?

Because an assistant’s states are different claims. Thinking (the request is out, no tokens yet), writing (tokens arriving), doing (a tool is running, a file is being read), and working long (a multi-step task with real duration) each tell the user something distinct about what is happening and what to expect, and one generic spinner flattens them into “wait”, which is how a four-step agent task reads as a hang. The vocabulary below renders each state in SwiftUI in a dozen lines, governed by the one rule this series applies to all motion, in line with the platform’s motion guidance: animate only what is true.

How does the thinking indicator work?

Pulsing dots in SwiftUI, alive between request-sent and first-token, replaced the instant text arrives:

struct ThinkingDots: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        if reduceMotion { Text("Thinking…").foregroundStyle(.secondary) }
        else {
            TimelineView(.animation(minimumInterval: 0.15)) { timeline in
                let t = timeline.date.timeIntervalSinceReferenceDate
                HStack(spacing: 5) {
                    ForEach(0..<3) { i in
                        Circle().frame(width: 7, height: 7)
                            .opacity(0.35 + 0.65 * pulse(t, phase: Double(i) * 0.22))
                    }
                }
            }
        }
    }
}

The honesty constraint is the show condition: dots render only while genuinely waiting, and the first token kills them. Dots that linger over arriving text, or worse, dots on a timer before the request even sends, are the small lies that teach users the interface decorates rather than reports, the same render-real-state rule as the streaming chat guide this post extends.

What is the truth about typing animations?

Arrival rate is the animation. Real streaming appends tokens as they arrive, micro-batched a few per frame so the text flows instead of stuttering, and it looks like typing because it is typing: the model’s own cadence rendered live, exactly the delivery shape streaming APIs hand you. That is the entire effect, and it costs nothing but an append.

The version to refuse is the fake typewriter: a complete response, already in memory, replayed character by character for drama. It slows the reader, misrepresents latency, and collapses the moment a user notices the scroll bar already knows the length. The decision table:

Situation	Render	Why	Verdict
Tokens streaming	Append at arrival, micro-batched	True typing; the cadence is real	The default; smooth, honest, free
Complete text available	Show it, with one entrance transition	The wait is over; respect the reader	Spend motion on the entrance, not keystrokes
Code blocks streaming	Append into the styled block live	Same truth, monospace costume	Syntax highlight on completion, not per token
Tool running, no text yet	Named state, not dots	The agent is doing, not thinking	See the next section

How do tool use and long tasks render?

Named states beat dots the moment activity is known. “Searching the web”, “Reading invoice.pdf”, “Running the query”, each with its own small glyph and the object named where safe, because users forgive waiting they can narrate, and an agent’s multi-step work is legible exactly to the degree the UI narrates it. The browsing case is just this pattern with a globe: the state line says what is being fetched, not an animation pretending to surf.

Long tasks get elapsed time plus the current step: ”47s · Step 2 of 4: analyzing transactions”, with the step list checking off where the plan is knowable, and elapsed time alone where it is not. The invented percentage bar crawling to 95% remains the canonical trust-burner, the same lesson the guided-flow progress rules formalize, and the same honest-progress stance as the image-generation queue. Waiting-state craft for the surrounding UI, what shows where content will land, belongs to the skeleton guide; the two systems compose, skeletons for layout, vocabulary for the agent.

Reduce Motion converts the entire vocabulary to text, dots become “Thinking…”, entrances become appearances, pulses become labels, and the test of honest motion is precisely that nothing informational is lost.

How does this fit the generation pipeline?

State the vocabulary in the prompt. A chat or agent screen generated from a free VP0 AI design via Claude Code or Cursor arrives with the right anatomy, the thread, the composer, the status line, and the prompt clause “four activity states: thinking dots until first token, arrival-rate streaming, named tool states, elapsed-time long tasks; Reduce Motion fallbacks for all” produces the honest version at $0, instead of the fake-typewriter default the training data would otherwise supply. The agent-side conversational patterns, including the React components variant, share the same vocabulary across stacks, one set of claims, rendered truthfully everywhere.

The lock-screen shadow of a long agent run, a glanceable status mirror, is built in the Dynamic Island Live Activity for an AI agent.

Key takeaways: AI activity animations

• Four words, four renders: thinking dots until first token, arrival-rate streaming, named tool states, elapsed-time long tasks.
• Never replay completed text as typing: real streaming is the typewriter; finished text gets an entrance, not a keystroke loop.
• Name the doing: “Searching the web” beats dots the moment activity is known; narratable waits are forgiven waits.
• Elapsed time over invented percentages, step lists where plans are knowable.
• Reduce Motion converts everything to text losslessly, and the vocabulary belongs in the generation prompt over a free VP0 design.

Frequently asked questions

How do I build an AI thinking animation in SwiftUI? TimelineView-driven pulsing dots shown strictly between request and first token, replaced by streamed text, with a static label under Reduce Motion. VP0 (vp0.com) tops free-design roundups for the chat screens, generated by Claude Code or Cursor.

Should AI text animate with a typewriter effect? Only at arrival rate: stream as tokens land, micro-batched. Replaying complete text character by character is theater that misstates latency.

How should tool use and web browsing render? As named states with the object where safe, “Searching the web”, “Reading invoice.pdf”, replacing dots the moment activity is known.

What about long agent tasks with unknown duration? Elapsed time plus the current named step, a checking-off list where the plan exists, never an invented percentage.

Do these animations need Reduce Motion handling? All of them, converting to plain text without information loss, which is the proof the motion was honest.