[docs-infra] Fix code block layout shift

mui · Apr 16, 2024 · ee0ee3f · ee0ee3f
1 parent 418fb02
commit ee0ee3f
Showing 1 changed file with 3 additions and 1 deletion.
diff --git 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}>