3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-02 02:42:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): Fix Collapsible hydration layout shift (#5159)

Browse source
This commit is contained in:
Sébastien Lorber 2021-07-13 17:31:26 +02:00 • committed by GitHub
parent fa9b0cd9c1
commit f33cd079c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/docusaurus-theme-common/src/utils/useCollapsible.tsx
View file

@ -5,6 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import React, {
useState,
useEffect,
@ -146,9 +147,17 @@ function useCollapseAnimation({
}
type CollapsibleElementType = React.ElementType<
Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd'>
Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd' | 'style'>
>;
// Prevent hydration layout shift before anims are handled imperatively with JS
function getSSRStyle(collapsed: boolean) {
if (ExecutionEnvironment.canUseDOM) {
return undefined;
}
return collapsed ? CollapsedStyles : ExpandedStyles;
}
export function Collapsible({
as: As = 'div',
collapsed,
@ -171,6 +180,7 @@ export function Collapsible({
<As
// @ts-expect-error: see https://twitter.com/sebastienlorber/status/1412784677795110914
ref={collapsibleRef}
style={getSSRStyle(collapsed)}
onTransitionEnd={(e) => {
if (e.propertyName !== 'height') {
return;