Changed the way isEmpty works

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -11,7 +11,7 @@ import s from './CartSidebarView.module.css'
 
 const CartSidebarView: FC = () => {
   const { closeSidebar } = useUI()
-  const { data, isEmpty } = useCart()
+  const { data, isLoading, isEmpty } = useCart()
 
   const { price: subTotal } = usePrice(
     data && {
@@ -19,7 +19,7 @@ const CartSidebarView: FC = () => {
       currencyCode: data.currency?.code || 'USD',
     }
   )
-  
+
   const { price: total } = usePrice(
     data && {
       amount: Number(data.total),
@@ -34,9 +34,7 @@ const CartSidebarView: FC = () => {
   return (
     <div
       className={cn(s.root, {
-        [s.empty]: error,
+        [s.empty]: error || success || isLoading || isEmpty,
-        [s.empty]: success,
-        [s.empty]: isEmpty,
       })}
     >
       <header className="px-4 pt-6 pb-4 sm:px-6">
@@ -56,7 +54,7 @@ const CartSidebarView: FC = () => {
         </div>
       </header>
 
-      {isEmpty ? (
+      {isLoading || isEmpty ? (
         <div className="flex-1 px-4 flex flex-col justify-center items-center">
           <span className="border border-dashed border-primary rounded-full flex items-center justify-center w-16 h-16 p-12 bg-secondary text-secondary">
             <Bag className="absolute" />

framework/bigcommerce/cart/use-cart.tsx

@@ -1,6 +1,7 @@
 import { normalizeCart } from '../lib/normalize'
 import type { HookFetcher } from '@commerce/utils/types'
 import type { SwrOptions } from '@commerce/utils/use-data'
+import defineProperty from '@commerce/utils/define-property'
 import useCommerceCart, { CartInput } from '@commerce/cart/use-cart'
 import type { Cart as BigCommerceCart } from '../api/cart'
 import update from '@framework/lib/immutability'
@@ -32,14 +33,16 @@ export function extendHook(
 
     // Uses a getter to only calculate the prop when required
     // response.data is also a getter and it's better to not trigger it early
-    Object.defineProperty(response, 'isEmpty', {
+    if (!('isEmpty' in response)) {
-      get() {
+      defineProperty(response, 'isEmpty', {
-        return Object.values(response.data?.line_items ?? {}).every(
+        get() {
-          (items) => !items.length
+          return Object.values(response.data?.line_items ?? {}).every(
-        )
+            (items) => !items.length
-      },
+          )
-      set: (x) => x,
+        },
-    })
+        set: (x) => x,
+      })
+    }
 
     return response.data
       ? update(response, {

framework/bigcommerce/wishlist/use-wishlist.tsx

@@ -1,5 +1,6 @@
 import { HookFetcher } from '@commerce/utils/types'
 import { SwrOptions } from '@commerce/utils/use-data'
+import defineProperty from '@commerce/utils/define-property'
 import useCommerceWishlist from '@commerce/wishlist/use-wishlist'
 import type { Wishlist } from '../api/wishlist'
 import useCustomer from '../customer/use-customer'
@@ -58,12 +59,14 @@ export function extendHook(
 
     // Uses a getter to only calculate the prop when required
     // response.data is also a getter and it's better to not trigger it early
-    Object.defineProperty(response, 'isEmpty', {
+    if (!('isEmpty' in response)) {
-      get() {
+      defineProperty(response, 'isEmpty', {
-        return (response.data?.items?.length || 0) <= 0
+        get() {
-      },
+          return (response.data?.items?.length || 0) <= 0
-      set: (x) => x,
+        },
-    })
+        set: (x) => x,
+      })
+    }
 
     return response
   }

framework/commerce/cart/use-cart.tsx

@@ -4,7 +4,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
 import useData, { ResponseState, SwrOptions } from '../utils/use-data'
 import { useCommerce } from '..'
 
-export type CartResponse<Result> = ResponseState<Result> & { isEmpty: boolean }
+export type CartResponse<Result> = ResponseState<Result> & { isEmpty?: boolean }
 
 export type CartInput = {
   cartId: Cart['id']
@@ -25,5 +25,5 @@ export default function useCart<Result>(
 
   const response = useData(options, input, fetcher, swrOptions)
 
-  return Object.assign(response, { isEmpty: true })
+  return response
 }

framework/commerce/wishlist/use-wishlist.tsx

@@ -3,7 +3,7 @@ import type { HookInput, HookFetcher, HookFetcherOptions } from '../utils/types'
 import useData, { ResponseState, SwrOptions } from '../utils/use-data'
 
 export type WishlistResponse<Result> = ResponseState<Result> & {
-  isEmpty: boolean
+  isEmpty?: boolean
 }
 
 export default function useWishlist<Result, Input = null>(
@@ -13,5 +13,5 @@ export default function useWishlist<Result, Input = null>(
   swrOptions?: SwrOptions<Result, Input>
 ): WishlistResponse<Result> {
   const response = useData(options, input, fetcherFn, swrOptions)
-  return Object.assign(response, { isEmpty: true })
+  return response
 }

pages/cart.tsx

@@ -24,7 +24,7 @@ export async function getStaticProps({
 export default function Cart() {
   const error = null
   const success = null
-  const { data, isEmpty } = useCart()
+  const { data, isLoading, isEmpty } = useCart()
 
   const { price: subTotal } = usePrice(
     data && {
@@ -42,7 +42,7 @@ export default function Cart() {
   return (
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">
-        {isEmpty ? (
+        {isLoading || isEmpty ? (
           <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
             <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
               <Bag className="absolute" />

pages/wishlist.tsx

@@ -22,14 +22,14 @@ export async function getStaticProps({
 
 export default function Wishlist() {
   const { data: customer } = useCustomer()
-  const { data, isEmpty } = useWishlist()
+  const { data, isLoading, isEmpty } = useWishlist()
 
   return (
     <Container>
       <div className="mt-3 mb-20">
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
-          {isEmpty ? (
+          {isLoading || isEmpty ? (
             <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
               <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
                 <Heart className="absolute" />