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

@@ -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>

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>

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"
       />
       

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>

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 
+                  <img
-                    v-if="item.product.images?.[0]" 
+                    v-if="item.product.images?.[0]"
-                    :src="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>

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>