[docs-infra] Fix code block layout shift (#41917)

mui · May 7, 2024 · ba4d629 · ba4d629
1 parent f377fa5
commit ba4d629
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}>