From 43c368e4e4de147c670dc410eb63041ced1ad953 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 27 Sep 2025 18:48:57 +0200
Subject: [PATCH] feat: add lazy loading to product images across market
 components

- Implemented lazy loading for product images in CartItem, CartSummary, ProductCard, ProductDetailDialog, CheckoutPage, and StallView components.
- This enhancement improves performance by deferring the loading of off-screen images, resulting in faster initial page load times and a smoother user experience.

These changes optimize image handling across the market module, contributing to better resource management and user interaction.
---
 src/modules/market/components/CartItem.vue            | 2 ++
 src/modules/market/components/CartSummary.vue         | 1 +
 src/modules/market/components/ProductCard.vue         | 1 +
 src/modules/market/components/ProductDetailDialog.vue | 2 ++
 src/modules/market/views/CheckoutPage.vue             | 7 ++++---
 src/modules/market/views/StallView.vue                | 1 +
 6 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/modules/market/components/CartItem.vue b/src/modules/market/components/CartItem.vue
index 36157ac..a7a79bd 100644
--- a/src/modules/market/components/CartItem.vue
+++ b/src/modules/market/components/CartItem.vue
@@ -8,6 +8,7 @@
           :src="item.product.images?.[0] || '/placeholder-product.png'"
           :alt="item.product.name"
           class="w-16 h-16 object-cover rounded-md"
+          loading="lazy"
           @error="handleImageError"
         />
       </div>
@@ -106,6 +107,7 @@
             :src="item.product.images?.[0] || '/placeholder-product.png'"
             :alt="item.product.name"
             class="w-16 h-16 object-cover rounded-md"
+            loading="lazy"
             @error="handleImageError"
           />
         </div>
diff --git a/src/modules/market/components/CartSummary.vue b/src/modules/market/components/CartSummary.vue
index 245e513..b4b4249 100644
--- a/src/modules/market/components/CartSummary.vue
+++ b/src/modules/market/components/CartSummary.vue
@@ -20,6 +20,7 @@
             :src="item.product.images?.[0] || '/placeholder-product.png'"
             :alt="item.product.name"
             class="w-8 h-8 object-cover rounded"
+            loading="lazy"
           />
           <div>
             <p class="font-medium text-foreground">{{ item.product.name }}</p>
diff --git a/src/modules/market/components/ProductCard.vue b/src/modules/market/components/ProductCard.vue
index 21ef2a0..9b669b5 100644
--- a/src/modules/market/components/ProductCard.vue
+++ b/src/modules/market/components/ProductCard.vue
@@ -6,6 +6,7 @@
         :src="product.images?.[0] || '/placeholder-product.png'"
         :alt="product.name"
         class="w-full h-48 object-cover"
+        loading="lazy"
         @error="handleImageError"
       />
       
diff --git a/src/modules/market/components/ProductDetailDialog.vue b/src/modules/market/components/ProductDetailDialog.vue
index e226b37..ebe7af5 100644
--- a/src/modules/market/components/ProductDetailDialog.vue
+++ b/src/modules/market/components/ProductDetailDialog.vue
@@ -17,6 +17,7 @@
               :src="currentImage"
               :alt="product.name"
               class="w-full h-full object-cover"
+              loading="lazy"
               @error="handleImageError"
             />
             <div v-else class="w-full h-full flex items-center justify-center">
@@ -37,6 +38,7 @@
                 :src="image"
                 :alt="`${product.name} - Image ${index + 1}`"
                 class="w-full h-full object-cover"
+                loading="lazy"
               />
             </button>
           </div>
diff --git a/src/modules/market/views/CheckoutPage.vue b/src/modules/market/views/CheckoutPage.vue
index 5600488..ffac5c8 100644
--- a/src/modules/market/views/CheckoutPage.vue
+++ b/src/modules/market/views/CheckoutPage.vue
@@ -54,11 +54,12 @@
               <div class="flex items-center space-x-4">
                 <!-- Product Image -->
                 <div class="w-16 h-16 bg-muted rounded-lg flex items-center justify-center">
-                  <img 
-                    v-if="item.product.images?.[0]" 
-                    :src="item.product.images[0]" 
+                  <img
+                    v-if="item.product.images?.[0]"
+                    :src="item.product.images[0]"
                     :alt="item.product.name"
                     class="w-full h-full object-cover rounded-lg"
+                    loading="lazy"
                   />
                   <Package v-else class="w-8 h-8 text-muted-foreground" />
                 </div>
diff --git a/src/modules/market/views/StallView.vue b/src/modules/market/views/StallView.vue
index 9a200a1..75968ea 100644
--- a/src/modules/market/views/StallView.vue
+++ b/src/modules/market/views/StallView.vue
@@ -24,6 +24,7 @@
                   :src="stall.logo"
                   :alt="stall.name"
                   class="w-full h-full object-cover"
+                  loading="lazy"
                   @error="handleLogoError"
                 />
               </div>