From 48af9e822f9f395f42ef8823b78ff08ef728eabf Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 6 Jan 2024 15:03:14 -0600
Subject: [PATCH] Hoist suspense boundary to root layout

---
 src/app/layout.tsx  | 11 +++++++++--
 src/site/Footer.tsx |  7 ++-----
 src/site/Nav.tsx    |  5 +----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1adcaceb..9aeff4bc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -10,6 +10,9 @@ import Nav from '@/site/Nav';
 import ToasterWithThemes from '@/toast/ToasterWithThemes';
 import PhotoEscapeHandler from '@/photo/PhotoEscapeHandler';
 import Footer from '@/site/Footer';
+import { Suspense } from 'react';
+import FooterClient from '@/site/FooterClient';
+import NavClient from '@/site/NavClient';
 
 import '../site/globals.css';
 
@@ -75,14 +78,18 @@ export default function RootLayout({
               'mx-3 mb-3',
               'lg:mx-6 lg:mb-6',
             )}>
-              <Nav />
+              <Suspense fallback={<NavClient />}>
+                <Nav />
+              </Suspense>
               <div className={clsx(
                 'min-h-[16rem] sm:min-h-[30rem]',
                 'mb-12',
               )}>
                 {children}
               </div>
-              <Footer />
+              <Suspense fallback={<FooterClient />}>
+                <Footer />
+              </Suspense>
             </main>
           </ThemeProviderClient>
         </StateProvider>
diff --git a/src/site/Footer.tsx b/src/site/Footer.tsx
index 53bf1c7c..1e1ce612 100644
--- a/src/site/Footer.tsx
+++ b/src/site/Footer.tsx
@@ -1,12 +1,9 @@
-import FooterClient from './FooterClient';
-import { Suspense } from 'react';
 import { authCached } from '@/cache';
+import FooterClient from './FooterClient';
 
 export default async function Footer() {
   const session = await authCached();
   return (
-    <Suspense fallback={<FooterClient />}>
-      <FooterClient userEmail={session?.user?.email} />
-    </Suspense>
+    <FooterClient userEmail={session?.user?.email} />
   );
 }
diff --git a/src/site/Nav.tsx b/src/site/Nav.tsx
index 18691025..684cc5c0 100644
--- a/src/site/Nav.tsx
+++ b/src/site/Nav.tsx
@@ -1,12 +1,9 @@
 import { authCached } from '@/cache';
 import NavClient from './NavClient';
-import { Suspense } from 'react';
 
 export default async function Nav() {
   const session = await authCached();
   return (
-    <Suspense fallback={<NavClient />}>
-      <NavClient showAdmin={Boolean(session?.user?.email)} />
-    </Suspense>
+    <NavClient showAdmin={Boolean(session?.user?.email)} />
   );
 }