feat: introduce ProgressiveImage component for enhanced image loading

- Added a new ProgressiveImage component to handle image loading with a blur effect and loading indicators.
- Updated ProductCard and ProductDetailDialog components to utilize ProgressiveImage, improving image loading performance and user experience.
- Configured properties such as blur radius, transition duration, and loading indicators for better customization.

These changes enhance the visual presentation of images and optimize loading behavior across market components.

src/modules/market/components/ProductCard.vue

@@ -2,11 +2,16 @@
   <Card class="overflow-hidden hover:shadow-lg transition-shadow duration-200">
     <!-- Product Image -->
     <div class="relative">
-      <img
+      <ProgressiveImage
         :src="product.images?.[0] || '/placeholder-product.png'"
         :alt="product.name"
-        class="w-full h-48 object-cover"
+        container-class="w-full h-48 bg-gray-100"
+        image-class="w-full h-48 object-cover"
+        :background-color="'#f3f4f6'"
+        :blur-radius="8"
+        :transition-duration="400"
         loading="lazy"
+        :show-loading-indicator="false"
         @error="handleImageError"
       />
       
@@ -105,6 +110,7 @@ import { ref } from 'vue'
 import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import ProgressiveImage from '@/components/ui/ProgressiveImage.vue'
 import { ShoppingCart } from 'lucide-vue-next'
 import type { Product } from '@/modules/market/stores/market'
 

src/modules/market/components/ProductDetailDialog.vue

@@ -12,12 +12,17 @@
         <div class="space-y-4">
           <!-- Main Image -->
           <div class="aspect-square rounded-lg overflow-hidden bg-gray-100">
-            <img
+            <ProgressiveImage
               v-if="currentImage"
               :src="currentImage"
               :alt="product.name"
-              class="w-full h-full object-cover"
+              container-class="w-full h-full"
+              image-class="w-full h-full object-cover"
+              :background-color="'#f3f4f6'"
+              :blur-radius="12"
+              :transition-duration="500"
               loading="lazy"
+              :show-loading-indicator="true"
               @error="handleImageError"
             />
             <div v-else class="w-full h-full flex items-center justify-center">
@@ -34,10 +39,14 @@
               class="relative w-20 h-20 rounded-lg overflow-hidden border-2 transition-all"
               :class="currentImageIndex === index ? 'border-primary' : 'border-gray-200 hover:border-gray-400'"
             >
-              <img
+              <ProgressiveImage
                 :src="image"
                 :alt="`${product.name} - Image ${index + 1}`"
-                class="w-full h-full object-cover"
+                container-class="w-full h-full"
+                image-class="w-full h-full object-cover"
+                :background-color="'#f3f4f6'"
+                :blur-radius="6"
+                :transition-duration="300"
                 loading="lazy"
               />
             </button>
@@ -163,6 +172,7 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
+import ProgressiveImage from '@/components/ui/ProgressiveImage.vue'
 import { Package, ShoppingCart, Store, Plus, Minus, X } from 'lucide-vue-next'
 import { useToast } from '@/core/composables/useToast'
 import type { Product } from '../types/market'