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'