From ee0ee3f5510c155b8b4640aad78ec44e937b889d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 16 Apr 2024 02:05:04 +0200
Subject: [PATCH] [docs-infra] Fix code block layout shift

---
 docs/src/modules/components/HighlightedCodeWithTabs.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
index 7372011ff47f06..4c88e761ad8d6f 100644
--- a/docs/src/modules/components/HighlightedCodeWithTabs.tsx
+++ b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -88,6 +88,8 @@ export default function HighlightedCodeWithTabs(
   const { tabs, storageKey } = props;
   const availableTabs = React.useMemo(() => tabs.map(({ tab }) => tab), [tabs]);
   const [activeTab, setActiveTab] = useLocalStorageState(storageKey ?? null, availableTabs[0]);
+  // During hydration, activeTab is null, default to first value.
+  const value = activeTab ?? availableTabs[0];
 
   const [mounted, setMounted] = React.useState(false);
 
@@ -101,7 +103,7 @@ export default function HighlightedCodeWithTabs(
 
   const ownerState = { mounted };
   return (
-    <Tabs selectionFollowsFocus value={activeTab} onChange={handleChange}>
+    <Tabs selectionFollowsFocus value={value} onChange={handleChange}>
       <TabList>
         {tabs.map(({ tab }) => (
           <Tab ownerState={ownerState} key={tab} value={tab}>