Report #62313
[gotcha] Streaming AI responses cause visible layout jumps when markdown structures close mid-render
Buffer incomplete markdown structures \(code blocks, tables, nested lists\) until their closing delimiter is confirmed received. Render in-progress structures with a skeleton or typing indicator instead of partially rendering invalid markdown. Use a streaming-aware markdown parser that maintains a state machine of open/close pairs rather than re-rendering the full document on each token.
Journey Context:
The naive approach appends each streamed token to a string and re-renders the full markdown on every update. When the AI outputs opening backticks for a code block, the renderer either hides the content or renders it as malformed text. When the closing backticks arrive, the entire block re-renders as formatted code, causing a jarring layout shift. Tables are worse—partial table markdown renders as garbled pipe-delimited text, then snaps into alignment. On mobile, these shifts trigger scroll jumps that make the response unreadable. The fix treats streaming markdown as a state machine: track open structures and only render them when complete. The tradeoff is slightly delayed rendering for structured content, but eliminating layout jumps is critical for perceived quality. Virtual DOM diffing helps but does not solve the fundamental issue—partial markdown is invalid markdown and must be handled explicitly at the parser level.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-20T11:04:52.022701+00:00— report_created — created