Fix render scheduling #2485
Merged
Fix render scheduling #2485
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
adamseckel
approved these changes
Jan 19, 2024
mattgperry
force-pushed
the
fix/queue-microtasks
branch
from
765ccc8
to
08976b4
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.
Fixes #2476
Layout animations were moved to trigger behind
queueMicrotasksas this allowed us to remove querySelectors and, if states were set synchronously in auseLayoutEffect(common within Framer sites) we could skip a bunch of needless animations by deferring layout animations until the end of the event queue.Although still "synchronous" in terms of still blocking render, it is asynchronous in the sense that other things can now happen before it. One of these "things" was the
.render()call inuseVisualElementwhich synchronously renders any changes within motion values after a render. This meant a render was inserted before layout animation measurements that led to surprisingtransformvalues being rendered when we came to measure elements.This PR moves that also to a
queueMicrotasks, which will fixes this class of bugs but also allow us to skip a bunch of needless renders.As a result of
.render()now being technically asynchronous this PR also updates a bunch of tests to wait the end of the event queue before measuring the DOM.Perhaps this needs to be a major bump? As it might affect the tests people have written for components.