chore(docs): add missing Suspense boundaries

mlaursen · Apr 22, 2024 · eee7954 · eee7954
1 parent 9708b81
commit eee7954
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExpandableLayoutExample.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ExpandableLayoutExample.tsx
@@ -10,7 +10,7 @@ import {
 } from "@react-md/core/layout/useExpandableLayout";
 import { Sheet } from "@react-md/core/sheet/Sheet";
 import { usePathname } from "next/navigation.js";
-import { type ReactElement } from "react";
+import { Suspense, type ReactElement } from "react";
 import { ExampleNavigation } from "./ExampleNavigation.jsx";
 import { type ExampleLayoutProps } from "./layouts.js";
 
@@ -42,12 +42,16 @@ export function ExpandableLayoutExample(
       </AppBar>
       {persistent && (
         <LayoutNav {...expandableNavProps}>
-          <ExampleNavigation layout={layout} />
+          <Suspense>
+            <ExampleNavigation layout={layout} />
+          </Suspense>
         </LayoutNav>
       )}
       {temporary && (
         <Sheet {...temporaryNavProps}>
-          <ExampleNavigation layout={layout} />
+          <Suspense>
+            <ExampleNavigation layout={layout} />
+          </Suspense>
         </Sheet>
       )}
       <Main {...mainProps}>{children}</Main>

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ResizableLayoutExample.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/ResizableLayoutExample.tsx
@@ -11,7 +11,7 @@ import {
 } from "@react-md/core/layout/useResizableLayout";
 import { Sheet } from "@react-md/core/sheet/Sheet";
 import { usePathname } from "next/navigation.js";
-import { type ReactElement } from "react";
+import { Suspense, type ReactElement } from "react";
 import { ExampleNavigation } from "./ExampleNavigation.jsx";
 import { type ExampleLayoutProps } from "./layouts.js";
 
@@ -45,14 +45,18 @@ export function ResizableLayoutExample(
       {persistent && (
         <>
           <LayoutNav {...expandableNavProps}>
-            <ExampleNavigation layout={layout} />
+            <Suspense>
+              <ExampleNavigation layout={layout} />
+            </Suspense>
           </LayoutNav>
           <LayoutWindowSplitter {...windowSplitterProps} />
         </>
       )}
       {temporary && (
         <Sheet {...temporaryNavProps}>
-          <ExampleNavigation layout={layout} />
+          <Suspense>
+            <ExampleNavigation layout={layout} />
+          </Suspense>
         </Sheet>
       )}
       <Main {...mainProps}>{children}</Main>

diff --git a/apps/docs/src/app/(layout-examples)/layout-example/[layout]/TemporaryLayoutExample.tsx b/apps/docs/src/app/(layout-examples)/layout-example/[layout]/TemporaryLayoutExample.tsx
@@ -6,7 +6,7 @@ import { Main } from "@react-md/core/layout/Main";
 import { useTemporaryLayout } from "@react-md/core/layout/useTemporaryLayout";
 import { Sheet } from "@react-md/core/sheet/Sheet";
 import { usePathname } from "next/navigation.js";
-import { type ReactElement } from "react";
+import { Suspense, type ReactElement } from "react";
 import { ExampleNavigation } from "./ExampleNavigation.jsx";
 import { type ExampleLayoutProps } from "./layouts.js";
 
@@ -26,7 +26,9 @@ export function TemporaryLayoutExample(
       </AppBar>
       <Main {...mainProps}>{children}</Main>
       <Sheet {...temporaryNavProps}>
-        <ExampleNavigation layout={layout} />
+        <Suspense>
+          <ExampleNavigation layout={layout} />
+        </Suspense>
       </Sheet>
     </>
   );