From f37a2df6ba192842c2ca59260c1478685133e518 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 3 Jul 2025 23:29:21 +0200
Subject: [PATCH] Improve cart loading and error UI handling

Loading and error messages are now only shown when the cart is empty. When cart items are present and loading, an 'updating...' indicator is displayed and the cart section is visually dimmed to indicate loading state.
---
 components/Cart/CartContents.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index 6e3db5d3..86da7d62 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -1,15 +1,18 @@
 <template>
-  <div v-if="isLoading">
+  <div v-if="isLoading && cartItems.length === 0">
     <h2 class="mt-64 text-3xl text-center">Loading cart...</h2>
   </div>
-  <div v-else-if="error">
+  <div v-else-if="error && cartItems.length === 0">
     <h2 class="mt-64 text-3xl text-center text-red-500">
       Error loading cart. Please try again.
     </h2>
   </div>
   <div v-else-if="cartItems.length">
-    <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
-    <section class="mt-10">
+    <h1 class="h-10 p-6 text-3xl font-bold text-center">
+      Cart
+      <span v-if="isLoading" class="text-sm text-gray-500 ml-2">(updating...)</span>
+    </h1>
+    <section class="mt-10" :class="{ 'opacity-70': isLoading }">
       <CartItem
         v-for="product in cartItems"
         :key="product.key"