From 21ad6bcbab35cdc53c6e5deb6c34194dbff520ef Mon Sep 17 00:00:00 2001
From: Fatih Altinok <fatihaltinok@live.com>
Date: Fri, 6 Sep 2024 23:59:10 +0300
Subject: [PATCH 1/4] feat(skeleton): Make cart banner optimistic

---
 templates/skeleton/app/components/Header.tsx | 22 +++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/templates/skeleton/app/components/Header.tsx b/templates/skeleton/app/components/Header.tsx
index 09fba1dc6..4abc4e45d 100644
--- a/templates/skeleton/app/components/Header.tsx
+++ b/templates/skeleton/app/components/Header.tsx
@@ -1,6 +1,10 @@
-import {Suspense} from 'react';
-import {Await, NavLink} from '@remix-run/react';
-import {type CartViewPayload, useAnalytics} from '@shopify/hydrogen';
+import {Suspense, useDeferredValue} from 'react';
+import {Await, NavLink, useAsyncValue} from '@remix-run/react';
+import {
+  type CartViewPayload,
+  useAnalytics,
+  useOptimisticCart,
+} from '@shopify/hydrogen';
 import type {HeaderQuery, CartApiQueryFragment} from 'storefrontapi.generated';
 import {useAside} from '~/components/Aside';
 
@@ -159,15 +163,19 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   return (
     <Suspense fallback={<CartBadge count={null} />}>
       <Await resolve={cart}>
-        {(cart) => {
-          if (!cart) return <CartBadge count={0} />;
-          return <CartBadge count={cart.totalQuantity || 0} />;
-        }}
+        <CartBanner />
       </Await>
     </Suspense>
   );
 }
 
+function CartBanner() {
+  const cart = useAsyncValue();
+  const optimisticCart = useOptimisticCart(cart);
+  const linesCount = optimisticCart?.lines?.nodes?.length || 0;
+  return <CartBadge count={linesCount} />;
+}
+
 const FALLBACK_HEADER_MENU = {
   id: 'gid://shopify/Menu/199655587896',
   items: [

From 271a38bc29e295456b95116eb87f266ab3a7630d Mon Sep 17 00:00:00 2001
From: Fatih Altinok <fatihaltinok@live.com>
Date: Mon, 9 Sep 2024 10:47:32 +0300
Subject: [PATCH 2/4] Incorporate changes from review

---
 templates/skeleton/app/components/Header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/skeleton/app/components/Header.tsx b/templates/skeleton/app/components/Header.tsx
index 4abc4e45d..aade34ee2 100644
--- a/templates/skeleton/app/components/Header.tsx
+++ b/templates/skeleton/app/components/Header.tsx
@@ -1,4 +1,4 @@
-import {Suspense, useDeferredValue} from 'react';
+import {Suspense} from 'react';
 import {Await, NavLink, useAsyncValue} from '@remix-run/react';
 import {
   type CartViewPayload,
@@ -170,9 +170,9 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
 }
 
 function CartBanner() {
-  const cart = useAsyncValue();
-  const optimisticCart = useOptimisticCart(cart);
-  const linesCount = optimisticCart?.lines?.nodes?.length || 0;
+  const originalCart = useAsyncValue() as CartApiQueryFragment | null;
+  const cart = useOptimisticCart(originalCart);
+  const linesCount = cart.totalQuantity ?? null;
   return <CartBadge count={linesCount} />;
 }
 

From 5dbf301a91730d472a018eabee3309abdcb32ecf Mon Sep 17 00:00:00 2001
From: Fatih Altinok <fatihaltinok@live.com>
Date: Thu, 19 Sep 2024 10:24:39 +0300
Subject: [PATCH 3/4] Incorporate review fixes

---
 templates/skeleton/app/components/Header.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/templates/skeleton/app/components/Header.tsx b/templates/skeleton/app/components/Header.tsx
index aade34ee2..4a08c9c37 100644
--- a/templates/skeleton/app/components/Header.tsx
+++ b/templates/skeleton/app/components/Header.tsx
@@ -172,8 +172,7 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
 function CartBanner() {
   const originalCart = useAsyncValue() as CartApiQueryFragment | null;
   const cart = useOptimisticCart(originalCart);
-  const linesCount = cart.totalQuantity ?? null;
-  return <CartBadge count={linesCount} />;
+  return <CartBadge count={cart?.totalQuantity ?? null} />;
 }
 
 const FALLBACK_HEADER_MENU = {

From 79b8fd7df1b1bf9d52a5bb854fd2399a433a9360 Mon Sep 17 00:00:00 2001
From: Fatih Altinok <fatihaltinok@live.com>
Date: Sat, 28 Sep 2024 10:05:08 +0300
Subject: [PATCH 4/4] Show totalQuantity as 0 if cat isn't ready

---
 templates/skeleton/app/components/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/skeleton/app/components/Header.tsx b/templates/skeleton/app/components/Header.tsx
index 4a08c9c37..8a437a100 100644
--- a/templates/skeleton/app/components/Header.tsx
+++ b/templates/skeleton/app/components/Header.tsx
@@ -172,7 +172,7 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
 function CartBanner() {
   const originalCart = useAsyncValue() as CartApiQueryFragment | null;
   const cart = useOptimisticCart(originalCart);
-  return <CartBadge count={cart?.totalQuantity ?? null} />;
+  return <CartBadge count={cart?.totalQuantity ?? 0} />;
 }
 
 const FALLBACK_HEADER_MENU = {