Streaming AI responses in React without layout shift
To stream AI responses without layout shift, render the answer into a container that only grows downward, keep everything around it at a fixed size, show a small thinking state until the first tokens arrive, and add sources and actions in space that's already reserved. Let people scroll freely instead of forcing the view to the bottom.
Why streamed answers jump
- Elements above the answer change size – a status line that swaps text, a loader that disappears
- Sources, buttons or follow-ups pop in after the text and push it around
- Markdown re-renders: a list or code block changes shape when its closing token arrives
- Auto-scroll fights the reader when they scroll up to read
Before the first token
The first second matters most. Show a small thinking state right where the answer will appear – ideally with what the model is doing – and let the text take its place without moving anything else.
- Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
- Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
- Shimmer Loader – Skeleton blocks that share one soft light sweep, plus shimmering text for “Thinking…” states
While it streams
Append text to one container that grows downward. Keep the status line a fixed height and swap its text in place. If you animate new words, keep it subtle and turn it off for people who ask for reduced motion.
- AI Answer – Streamed answer with source cards, citation chips that preview their source, copy, regenerate, feedback and follow-ups
- Text Reveal – Text that arrives word by word or letter by letter – each piece rises out of a soft blur as it scrolls into view
Sources, citations and actions
Reserve the space for source cards and the action bar from the start, or add them below the text where they can't push it. Citations work best as small numbered chips inside the sentence that preview their source on hover.
- Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked
- Message Actions – The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer
Scrolling
Follow the stream only while the reader is at the bottom. As soon as they scroll up, stop following and show a small "jump to latest" button instead of pulling them back down.
Swapping content
When a regenerated answer replaces the old one, or a short answer expands, let the box glide to its new height instead of snapping.
- Blur Crossfade – Swaps content with a soft blur while the box glides smoothly to the size of what comes next
Questions
Should I stream word by word or in chunks?
Render what arrives as it arrives. If tokens come in bursts, a light per-word fade smooths it out without slowing the answer down.
How do I handle markdown while streaming?
Parse the growing text on every update but keep unfinished blocks – an open code fence or table – in a simple form until they close, so their shape doesn't flip.
Does reduced motion matter for streaming?
Yes. With reduced motion on, show text without animation; affectUI's answer and text components check the setting themselves.
Updated 2026-10-29