fix: initialize dimensions before first paint #526
Merged
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
The container dimensions are in the `ResizeObserver` callback. It fires only after the first paint. This means that the dimensions are not initialized during the first paint, which causes a layout shift. The dimensions are known before the first paint. We can retrieve the container width and height by using `getBoundingClientRect` inside `useLayoutEffect`. This way we can initialize the dimensions correctly so the panes are already sized the right way during the first render.
✅ Deploy Preview for allotment-website canceled.
|
✅ Deploy Preview for allotment-storybook ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Hi @Gelio. Sorry, I missed this! Looks really good and I appreciate the time you've taken to put together the PR and videos. I'll get around to getting this merged and released in the next few days. |
|
No worries, thanks for getting back to this PR. I'm looking forward to seeing the fix published |
johnwalley
approved these changes
Feb 2, 2023
|
Thanks for publishing the fix 🚀 |
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 container dimensions are set in the
ResizeObservercallback. It fires only after the first paint. This means that the dimensions are not initialized during the first paint, which causes a layout shift.The dimensions are known before the first paint. We can retrieve the container width and height by using
getBoundingClientRectinsideuseLayoutEffect. This way we can initialize the dimensions correctly so the panes are already sized the right way during the first render.This started being a problem after #404 since the panes are visible during the first paint now.
Videos
Here are videos from the initial render before and after the fix. I suspect this bug is only noticeable when there are many
useLayoutEffect/useEffect/React elements to render, as the delay between the first and second paint is greater in these cases.Before the fix:
2023-01-11.15-55-53.mp4
After the fix:
2023-01-11.15-57-25.mp4