From f0572c713ff0c1398c549014ebae00e9c00b02b5 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Mon, 23 Dec 2024 17:47:51 +0100
Subject: [PATCH] quick fix for CollapsibleBase hydration error

---
 .../src/components/Collapsible/index.tsx        | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
index ea0539332919..bf39faeca33d 100644
--- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
@@ -15,7 +15,7 @@ import React, {
   type SetStateAction,
   type ReactNode,
 } from 'react';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import {prefersReducedMotion} from '../../utils/accessibilityUtils';
 
@@ -161,8 +161,15 @@ type CollapsibleElementType = React.ElementType<
  * Prevent hydration layout shift before animations are handled imperatively
  * with JS
  */
-function getSSRStyle(collapsed: boolean) {
-  if (ExecutionEnvironment.canUseDOM) {
+function getSSRStyle({
+  collapsed,
+  isBrowser,
+}: {
+  collapsed: boolean;
+  isBrowser: boolean;
+}) {
+  // After hydration, styles are applied
+  if (isBrowser) {
     return undefined;
   }
   return collapsed ? CollapsedStyles : ExpandedStyles;
@@ -202,6 +209,7 @@ function CollapsibleBase({
   className,
   disableSSRStyle,
 }: CollapsibleBaseProps) {
+  const isBrowser = useIsBrowser();
   const collapsibleRef = useRef<HTMLElement>(null);
 
   useCollapseAnimation({collapsibleRef, collapsed, animation});
@@ -211,7 +219,8 @@ function CollapsibleBase({
       // @ts-expect-error: the "too complicated type" is produced from
       // "CollapsibleElementType" being a huge union
       ref={collapsibleRef as RefObject<never>} // Refs are contravariant, which is not expressible in TS
-      style={disableSSRStyle ? undefined : getSSRStyle(collapsed)}
+      // Not even sure we need this SSRStyle anymore, try to remove it?
+      style={disableSSRStyle ? undefined : getSSRStyle({collapsed, isBrowser})}
       onTransitionEnd={(e: React.TransitionEvent) => {
         if (e.propertyName !== 'height') {
           return;