From eee79541b37313ef0acc89458b5e845c46a84bee Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Mon, 22 Apr 2024 00:51:47 -0400
Subject: [PATCH] chore(docs): add missing Suspense boundaries

---
 .../[layout]/ExpandableLayoutExample.tsx               | 10 +++++++---
 .../layout-example/[layout]/ResizableLayoutExample.tsx | 10 +++++++---
 .../layout-example/[layout]/TemporaryLayoutExample.tsx |  6 ++++--
 3 files changed, 18 insertions(+), 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
index 3f012028f8..a191fbc700 100644
--- 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
index 831a98e68d..5419a8eb00 100644
--- 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
index fd1861d3c5..c2251b9515 100644
--- 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>
     </>
   );