Hoist suspense boundary to root layout

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>

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} />
   );
 }

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)} />
   );
 }