Skip to content

feat: render loading placeholder for incomplete streaming images#504

Open
sleitor wants to merge 2 commits intovercel:mainfrom
sleitor:feat/incomplete-image-placeholder
Open

feat: render loading placeholder for incomplete streaming images#504
sleitor wants to merge 2 commits intovercel:mainfrom
sleitor:feat/incomplete-image-placeholder

Conversation

@sleitor
Copy link
Copy Markdown
Contributor

@sleitor sleitor commented Apr 10, 2026

Summary

Fixes #503 — incomplete images during streaming now render an animated skeleton placeholder instead of being silently removed. This mirrors the existing behavior for incomplete links.

What changed


  • link-image-handler.ts: Both handleIncompleteUrl() and handleIncompleteText() now emit ![alt](streamdown:incomplete-image) for incomplete images instead of stripping them entirely
  • index.ts: Updated earlyReturn check to also short-circuit on streamdown:incomplete-image; fixed JSDoc for images option
  • Tests updated: removal expectations → placeholder expectations

packages/streamdown

  • lib/image.tsx: ImageComponent detects src === 'streamdown:incomplete-image' and renders an animate-pulse skeleton div with data-incomplete="true"
  • Tests added for the new placeholder behavior

Changeset: remend@patch + streamdown@patch

Before / After

Before: ![logo](./assets/log → (image silently removed, layout shift)

After: ![logo](./assets/log → animated grey skeleton placeholder shown until the stream completes

Test coverage

  • 356 remend tests ✅
  • 964 streamdown tests ✅

All existing tests updated; 4 new tests added for the placeholder behavior.

sleitor added 2 commits March 11, 2026 14:09
Incomplete images during streaming (e.g. `![alt](https://exampl`) now
render an animated skeleton placeholder instead of being silently removed.

Changes:
- remend: emit `![alt](streamdown:incomplete-image)` for incomplete images
  instead of stripping them entirely, in both handleIncompleteUrl() and
  handleIncompleteText()
- remend: add earlyReturn check for `streamdown:incomplete-image` marker
- streamdown: ImageComponent renders animate-pulse skeleton div when
  src === 'streamdown:incomplete-image'
- Tests updated to reflect new placeholder behavior

Mirrors the existing incomplete link handling (streamdown:incomplete-link).

Closes vercel#503
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 10, 2026

@sleitor is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Streaming support for partial images (similar to incomplete link handling)

1 participant