add suspense boundaries

This commit is contained in:
Sol Irvine 2023-11-12 16:03:59 +09:00
parent 848e841419
commit 06e34fa1bc
2 changed files with 16 additions and 5 deletions

View File

@ -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">
<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/"

View File

@ -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">
<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">
<Suspense>
<CartModal cart={cart} promotedItem={promotedItem} />
</Suspense>
<Suspense>
<MenuModal scrolled={!inView} />
</Suspense>
</div>
</Suspense>
</nav>