suspense cookies call

ethanniser · Oct 18, 2024 · e7f86f0 · e7f86f0
1 parent d124d79
commit e7f86f0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,8 @@ import Link from "next/link";
 import { SearchDropdownComponent } from "@/components/search-dropdown";
 import { getCart } from "@/lib/cart";
 import { MenuIcon } from "lucide-react";
+import { Suspense } from "react";
+import { Cart } from "@/components/cart";
 
 const helvetica = localFont({
   src: "./fonts/HelveticaNeueLTPro-Md.woff",
@@ -33,8 +35,6 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cart = await getCart();
-
   return (
     <html lang="en" className="h-full">
       <body
@@ -67,11 +67,9 @@ export default async function RootLayout({
                 >
                   ORDER
                 </Link>
-                {cart.length > 0 && (
-                  <div className="absolute -right-3 -top-1 rounded-full bg-yellow-300 px-1 text-xs text-green-800">
-                    {cart.length}
-                  </div>
-                )}
+                <Suspense>
+                  <Cart />
+                </Suspense>
               </div>
               <Link
                 href="/order-history"

diff --git a/src/components/cart.tsx b/src/components/cart.tsx
@@ -0,0 +1,13 @@
+import { getCart } from "@/lib/cart";
+
+export async function Cart() {
+  const cart = await getCart();
+  if (cart.length == 0) {
+    return null;
+  }
+  return (
+    <div className="absolute -right-3 -top-1 rounded-full bg-yellow-300 px-1 text-xs text-green-800">
+      {cart.length}
+    </div>
+  );
+}