crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

add suspense boundaries

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/layout/footer.tsx
View File

@ -5,6 +5,7 @@ import InstagramIcon from 'components/icons/instagram';
import KanjiLogo from 'components/icons/kanji'; import KanjiLogo from 'components/icons/kanji';
import { Cart, Product } from 'lib/shopify/types'; import { Cart, Product } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
import { Suspense } from 'react';
import FooterMenu from './footer-menu'; import FooterMenu from './footer-menu';
import NewsletterFooter from './newsletter-footer'; 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-col space-y-2 pt-24">
<div className="flex flex-row justify-between space-x-4"> <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"> <div className="flex flex-row items-center space-x-6">
<Link <Link
href="https://www.instagram.com/narai.sake/" href="https://www.instagram.com/narai.sake/"

16
components/layout/navbar/index.tsx
View File

@ -63,8 +63,12 @@ export default function Navbar({
</div> </div>
<nav className="flex flex-row items-center space-x-4 px-6"> <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"> <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} /> <Suspense>
<MenuModal scrolled={!inView} /> <CartModal cart={cart} promotedItem={promotedItem} />
</Suspense>
<Suspense>
<MenuModal scrolled={!inView} />
</Suspense>
</div> </div>
</nav> </nav>
</div> </div>
@ -90,8 +94,12 @@ export default function Navbar({
<LanguageControl lang={locale} /> <LanguageControl lang={locale} />
</div> </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"> <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} /> <Suspense>
<MenuModal scrolled={!inView} /> <CartModal cart={cart} promotedItem={promotedItem} />
</Suspense>
<Suspense>
<MenuModal scrolled={!inView} />
</Suspense>
</div> </div>
</Suspense> </Suspense>
</nav> </nav>