[docs-infra] Fix Banner CLS (#44632)

mui · Dec 3, 2024 · 9166695 · 9166695
1 parent 9b49147
commit 9166695
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
@@ -14,11 +14,21 @@ function isBlackFriday() {
   return today > start && today < end;
 }
 
+let hadHydrated = false;
+
 export default function AppFrameBanner() {
   if (!FEATURE_TOGGLE.enable_docsnav_banner) {
     return null;
   }
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [mounted, setMounted] = React.useState(hadHydrated);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  React.useEffect(() => {
+    hadHydrated = true;
+    setMounted(true);
+  }, []);
+
   // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
   // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes
   const pageContext = React.useContext(PageContext);
@@ -30,7 +40,7 @@ export default function AppFrameBanner() {
   if (showSurveyMessage) {
     message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
     href = 'https://tally.so/r/3Ex4PN?source=website';
-  } else if (isBlackFriday()) {
+  } else if (mounted && isBlackFriday()) {
     message = `Black Friday is here! Don't miss out on the best offers of the year.`;
     href = 'https://mui.com/store/bundles/?deal=black-friday&from=docs';
   }

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -65,24 +65,22 @@ export function NextNProgressBar() {
 const sx = { minWidth: { sm: 160 } };
 
 const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
+let hadHydrated = false;
 
 export function DeferredAppSearch() {
-  const [mounted, setMounted] = React.useState(false);
+  const [mounted, setMounted] = React.useState(hadHydrated);
   React.useEffect(() => {
+    hadHydrated = true;
     setMounted(true);
   }, []);
 
-  return (
-    <React.Fragment>
-      {/* Suspense isn't supported for SSR yet */}
-      {mounted ? (
-        <React.Suspense fallback={<Box sx={sx} />}>
-          <AppSearch sx={sx} />
-        </React.Suspense>
-      ) : (
-        <Box sx={sx} />
-      )}
-    </React.Fragment>
+  /* Suspense isn't supported for SSR yet */
+  return mounted ? (
+    <React.Suspense fallback={<Box sx={sx} />}>
+      <AppSearch sx={sx} />
+    </React.Suspense>
+  ) : (
+    <Box sx={sx} />
   );
 }