From f33cd079c284bed8ad8498ea6f0f6307075c1c6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Tue, 13 Jul 2021 17:31:26 +0200
Subject: [PATCH] fix(v2): Fix Collapsible hydration layout shift (#5159)

---
 .../src/utils/useCollapsible.tsx                     | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-common/src/utils/useCollapsible.tsx b/packages/docusaurus-theme-common/src/utils/useCollapsible.tsx
index cd99d5d506..a4efd49ab0 100644
--- a/packages/docusaurus-theme-common/src/utils/useCollapsible.tsx
+++ b/packages/docusaurus-theme-common/src/utils/useCollapsible.tsx
@@ -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;