Adjusts suspense boundaries to be closer to the components that need it

app/[page]/layout.tsx

@@ -3,13 +3,15 @@ import { Suspense } from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="w-full bg-white dark:bg-black">
         <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
           <Suspense>{children}</Suspense>
         </div>
       </div>
-      <Footer />
-    </Suspense>
+      <Suspense>
+        <Footer />
+      </Suspense>
+    </>
   );
 }

app/search/layout.tsx

@@ -6,7 +6,7 @@ import { Suspense } from 'react';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="mx-auto flex flex-col py-6 text-black dark:text-white md:flex-row">
         <div className="order-first flex-none md:w-1/6">
           <Collections />
@@ -16,7 +16,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
           <FilterList list={sorting} title="Sort by" />
         </div>
       </div>
-      <Footer />
-    </Suspense>
+      <Suspense>
+        <Footer />
+      </Suspense>
+    </>
   );
 }

components/cart/index.tsx

@@ -1,6 +1,8 @@
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
+import { Suspense } from 'react';
 import CartModal from './modal';
+import OpenCart from './open-cart';
 
 export default async function Cart() {
   const cartId = cookies().get('cartId')?.value;
@@ -10,5 +12,9 @@ export default async function Cart() {
     cart = await getCart(cartId);
   }
 
-  return <CartModal cart={cart} />;
+  return (
+    <Suspense fallback={<OpenCart className="h-6" />}>
+      <CartModal cart={cart} />
+    </Suspense>
+  );
 }

components/layout/navbar/index.tsx

@@ -1,10 +1,8 @@
 import Cart from 'components/cart';
-import OpenCart from 'components/cart/open-cart';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
-import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
 const { SITE_NAME } = process.env;
@@ -48,9 +46,7 @@ export default async function Navbar() {
           <Search />
         </div>
         <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart className="h-6" />}>
-            <Cart />
-          </Suspense>
+          <Cart />
         </div>
       </div>
     </nav>

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';
 
@@ -7,11 +8,11 @@ export type PathFilterItem = { title: string; path: string };
 
 function FilterItemList({ list }: { list: ListItem[] }) {
   return (
-    <div className="hidden md:block">
+    <>
       {list.map((item: ListItem, i) => (
         <FilterItem key={i} item={item} />
       ))}
-    </div>
+    </>
   );
 }
 
@@ -21,10 +22,14 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
       <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
         {title ? <h3 className="hidden text-xs text-gray-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense>
+            <FilterItemList list={list} />
+          </Suspense>
         </ul>
         <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense>
+            <FilterItemDropdown list={list} />
+          </Suspense>
         </ul>
       </nav>
     </>