fix: remove animation spans after streaming ends - #573
Open
BetterAndBetterII wants to merge 2 commits into
Open
Conversation
Contributor
|
@BetterAndBetterII is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fix animation spans (
data-sd-animate) persisting in the DOM afterisAnimatinggoes false. Memoized leaf components (MemoParagraph,MemoLi, etc.) compare onlyclassName+ source position and never compare children, so they discard the span-free reparse that Block produces when the animate rehype plugin is removed from the pipeline.Root cause
Blockcomparator correctly detects the rehype pipeline change and re-parses without the animate plugin. But the resulting span-free HAST never commits because leaf memo comparators (sameClassAndNode) see identical class + position and return "equal" — React throws away the new children.Fix
Include
isAnimatingin block keys. When streaming ends, keys change and React mounts fresh subtrees, allowing the span-free reparse to commit. During streaming (isAnimatingstays true), keys are stable — no hot-path penalty.Type of Change
Related Issues
Fixes #570
Changes Made
packages/streamdown/index.tsx: IncludeisAnimatingin block key computation so React remounts fresh subtrees when the animate rehype plugin is removedpackages/streamdown/__tests__/animate-integration.test.tsx: New integration test verifying spans are removed whenisAnimatinggoes false.changeset/clean-settled-animation-spans.md: Patch changesetTesting
animate-integration.test.tsxChecklist
Additional Notes
The fix only affects the transition when
isAnimatingflips. During active streaming (isAnimating stays true), block keys remain stable — no extra remounting on the hot path. The one-time remount cost when streaming ends is negligible compared to the persistent DOM pollution of stale animation spans.