Track appear effect handover per element due to Suspense #2810
Conversation
This file contains 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
With nested Suspense boundaries, it might be that any children mount at a later timing than `queueMicrotask` guarantees. While we could switch to another timing-based method, it doesn't reliably ensure our call happens later than the mounting of the optimized appear effect. There seems to be no reliable way of telling when those nested boundaries have mounted (after completing) hydration, so removing the functionality seems to be the most sensible way. We remove optimized appear animations from the appearAnimationStore anyway after running, so this was just a minor optimization. The trade-off might be, appear effects re-run when changing breakpoints, but to me that sounds ok, as barely any user ever changes the breakpoint.
|
This line checks if handoff is complete. If it is, we know that the animation is being interrupted by a subsequent animation, so we cancel the optimised animation and start the next animation from So if different components are handing off at different times, rather than keep the completion status of all components globally we would want to keep a boolean for each individual component. |
|
Hmm, so the handoff completed check is more like a "optimized appear animation started or running" check? |
kurtextrem
changed the title
scheduleHandoffComplete due to SuspensescheduleHandoffComplete per element due to Suspense
kurtextrem
changed the title
scheduleHandoffComplete per element due to Suspense
|
Updated:
|
kurtextrem
force-pushed
the
remove-complete-handoff
branch
from
6d257bd to
6495100
Compare
kurtextrem
force-pushed
the
remove-complete-handoff
branch
from
6495100 to
8d24787
Compare
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.
Context
With nested Suspense boundaries, it might be that any children mount at a later timing than
queueMicrotaskguarantees. While we could switch to another timing-based method, it doesn't reliably ensure the call tocompleteHandoffhappens after all children with optimized appear effects have mounted and run their mountuseEffect. This means, if some child A mounted and has run an optimized appear effect, it would complete the handoff and make all further components (or children) falsely think they didn't have an optimized appear effect, which could lead to re-running of the appear effects on mount.The fix
We now store the handover state per appear optimization element id, and only based on that state decide if we want to run further animations only from motion inside
useEffect.