From 06e34fa1bc8d355020c4b550df52994474db4045 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Sun, 12 Nov 2023 16:03:59 +0900
Subject: [PATCH] add suspense boundaries

---
 components/layout/footer.tsx       |  5 ++++-
 components/layout/navbar/index.tsx | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index a86f4f81f..be0609218 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -5,6 +5,7 @@ import InstagramIcon from 'components/icons/instagram';
 import KanjiLogo from 'components/icons/kanji';
 import { Cart, Product } from 'lib/shopify/types';
 import Link from 'next/link';
+import { Suspense } from 'react';
 import FooterMenu from './footer-menu';
 import NewsletterFooter from './newsletter-footer';
 
@@ -95,7 +96,9 @@ export default async function Footer({
 
             <div className="flex flex-col space-y-2 pt-24">
               <div className="flex flex-row justify-between space-x-4">
-                <CartModal cart={cart} promotedItem={promotedItem} />
+                <Suspense>
+                  <CartModal cart={cart} promotedItem={promotedItem} />
+                </Suspense>
                 <div className="flex flex-row items-center space-x-6">
                   <Link
                     href="https://www.instagram.com/narai.sake/"
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 772808c9a..a73f00077 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -63,8 +63,12 @@ export default function Navbar({
             </div>
             <nav className="flex flex-row items-center space-x-4 px-6">
               <div className="flex flex-col-reverse items-center justify-center space-y-2 px-2 md:flex-row md:space-x-6">
-                <CartModal cart={cart} promotedItem={promotedItem} />
-                <MenuModal scrolled={!inView} />
+                <Suspense>
+                  <CartModal cart={cart} promotedItem={promotedItem} />
+                </Suspense>
+                <Suspense>
+                  <MenuModal scrolled={!inView} />
+                </Suspense>
               </div>
             </nav>
           </div>
@@ -90,8 +94,12 @@ export default function Navbar({
               <LanguageControl lang={locale} />
             </div>
             <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6 md:space-y-0">
-              <CartModal cart={cart} promotedItem={promotedItem} />
-              <MenuModal scrolled={!inView} />
+              <Suspense>
+                <CartModal cart={cart} promotedItem={promotedItem} />
+              </Suspense>
+              <Suspense>
+                <MenuModal scrolled={!inView} />
+              </Suspense>
             </div>
           </Suspense>
         </nav>