fix: prune exiting digit slot when its fade animation is interrupted - #16
Open
saileshbro wants to merge 1 commit into
Open
Conversation
`useSlotOpacity` gated `onExitComplete` on `finished === true`. An interrupted `withTiming` reports `finished: false`, so the callback never fired and `useLayoutDiff` kept the key in `exitingRef` indefinitely — the exiting glyph stayed mounted on top of the live one. Reproduces by changing the value twice in quick succession, or by any re-render that cancels the fade mid-flight (e.g. a navigation push over the screen): every digit slot that was mid-exit is left permanently doubled. Pruning unconditionally is safe because `useLayoutDiff` already deletes any key present in the current layout during its diff, so a slot that has re-entered is never removed by this path.
|
@saileshbro is attempting to deploy a commit to the antoninwingender's projects 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.
The bug
useSlotOpacitygatesonExitCompleteonfinished === true:An interrupted
withTimingreportsfinished: false.useLayoutDiffkeeps a key inexitingRefuntilonExitCompletefires for it, so when the fade is interrupted the key is never removed — the exiting glyph stays mounted on top of the live one indefinitely.Reproducing
Anything that cancels the exit fade mid-flight:
formSheetover the screen while the digits were still rollingResult: every slot that was mid-exit is left permanently doubled — the hero number, a secondary line and a percentage all rendering two superimposed digit stacks (
2,238over2,276, and so on). It does not recover, because nothing else prunesexitingRef.The fix
Report completion regardless of
finished.This is safe:
useLayoutDiffalready deletes any key present in the current layout during its diff —— so a slot that has re-entered is never removed by this path. The callback only ever cleans up a slot that stopped animating, for whatever reason.
Notes
nativerenderer) — the doubling was reproducible on demand before, and is gone after.