From ba4d629c37adae38ef076e7e1320f88c38f2c967 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 16 Apr 2024 12:27:59 +0200 Subject: [PATCH] [docs-infra] Fix code block layout shift (#41917) --- 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.map(({ tab }) => (