fix(v2): Fix Collapsible hydration layout shift #5159
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
|
✔️ [V2] 🔨 Explore the source changes: 6c8383a 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/60edae891334ca64a56898f5 😎 Browse the preview: https://deploy-preview-5159--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5159--docusaurus-2.netlify.app/ |
|
Size Change: 0 B Total Size: 973 kB ℹ️ View Unchanged
|
kdrag0n
added a commit
to kdrag0n/protonaosp.kdrag0n.dev
that referenced
this pull request
Jul 13, 2021
We're on canary because of [1]. Upgrade for [2] and [3]. [1] facebook/docusaurus#4273 [2] facebook/docusaurus#5157 [3] facebook/docusaurus#5159
UtsavBalar1231
pushed a commit
to UtsavBalar1231/docusaurus
that referenced
this pull request
Jul 24, 2021
We're on canary because of [1]. Upgrade for [2] and [3]. [1] facebook/docusaurus#4273 [2] facebook/docusaurus#5157 [3] facebook/docusaurus#5159 Change-Id: Ic11b4480368fde47a82bd9613513972c51ffd8eb
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.
Motivation
On the server rendering, the collapsible component is not collapsed properly when
props.collapsed=trueThis affects collapsible mobile TOC, not the navbar / sidebar items because they have extra CSS from Infima.
Can be seen with JS disabled:
This is because collapsed style is applied through JS only after hydration, so the collapsing happens with a little delay.
This PR make sure we apply collapsed style on the server to avoid that layout shift
(Write your motivation here.)
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
preview
Related PRs
#4273