From d88cabf68351c8faea8b820113961743a7cf34ac Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Wed, 8 Nov 2023 15:04:50 -0600
Subject: [PATCH] Use Suspense

---
 app/product/[handle]/page.tsx              | 15 +++++++++------
 components/layout/navbar/index.tsx         |  8 ++++++--
 components/layout/navbar/mobile-menu.tsx   |  6 ++++--
 components/layout/search/filter/index.tsx  |  9 +++++++--
 components/product/product-description.tsx |  9 +++++++--
 5 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index f9908e80c..c7b759841 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -9,6 +9,7 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
+import { Suspense } from 'react';
 
 export async function generateMetadata({
   params
@@ -81,12 +82,14 @@ export default async function ProductPage({ params }: { params: { handle: string
       <div className="mx-auto max-w-screen-2xl px-4">
         <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
-            />
+            <Suspense fallback={null}>
+              <Gallery
+                images={product.images.map((image: Image) => ({
+                  src: image.url,
+                  altText: image.altText
+                }))}
+              />
+            </Suspense>
           </div>
 
           <div className="basis-full lg:basis-2/6">
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 0058d5ec8..6345629ab 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -15,7 +15,9 @@ export default async function Navbar() {
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
       <div className="block flex-none md:hidden">
-        <MobileMenu menu={menu} />
+        <Suspense fallback={null}>
+          <MobileMenu menu={menu} />
+        </Suspense>
       </div>
       <div className="flex w-full items-center">
         <div className="flex w-full md:w-1/3">
@@ -41,7 +43,9 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-          <Search />
+          <Suspense fallback={null}>
+            <Search />
+          </Suspense>
         </div>
         <div className="flex justify-end md:w-1/3">
           <Suspense fallback={<OpenCart />}>
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 6d798370e..d57ba5780 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -3,7 +3,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';
 
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 </button>
 
                 <div className="mb-4 w-full">
-                  <Search />
+                  <Suspense fallback={null}>
+                    <Search />
+                  </Suspense>
                 </div>
                 {menu.length ? (
                   <ul className="flex w-full flex-col">
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index 33a36c6da..d05a770fb 100644
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -1,4 +1,5 @@
 import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
 import FilterItemDropdown from './dropdown';
 import { FilterItem } from './item';
 
@@ -25,10 +26,14 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
           </h3>
         ) : null}
         <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>
         </ul>
         <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>
         </ul>
       </nav>
     </>
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
index a81a6b02c..10232ae3d 100644
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';
 
 export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
           />
         </div>
       </div>
-      <VariantSelector options={product.options} variants={product.variants} />
+      <Suspense fallback={null}>
+        <VariantSelector options={product.options} variants={product.variants} />
+      </Suspense>
 
       {product.descriptionHtml ? (
         <Prose
@@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
         />
       ) : null}
 
-      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      <Suspense fallback={null}>
+        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      </Suspense>
     </>
   );
 }