FIX: remove comment tag; enhance image loading behavior in ProgressiveImage and ImageViewer components

- Added a key to the ProgressiveImage component to ensure proper reactivity when the image source changes.
- Implemented a watcher in the ProgressiveImage component to reset loading state on source changes, improving user experience during image transitions.

These changes enhance the reliability and responsiveness of image handling in the application.

src/components/ui/image/ImageViewer.vue

@@ -3,6 +3,7 @@
     <!-- Primary image display with progressive loading -->
     <div v-if="currentImageSrc" class="primary-image relative">
       <ProgressiveImage
+        :key="`image-${currentImageIndex}-${currentImageSrc}`"
         :src="currentImageSrc"
         :alt="alt || 'Image'"
         :container-class="containerClass"

src/components/ui/image/ProgressiveImage.vue

@@ -17,7 +17,7 @@
         'progressive-image-loaded': isLoaded,
         'progressive-image-error': hasError
       }
-    ]" :loading="loading" @load="handleLoad" @error="handleError" /> -->
+    ]" :loading="loading" @load="handleLoad" @error="handleError" />
 
     <!-- Loading indicator (optional) -->
     <div v-if="showLoadingIndicator && !isLoaded && !hasError" class="progressive-image-loading-indicator">
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { Package } from 'lucide-vue-next'
 
 interface Props {
@@ -189,6 +189,17 @@ onMounted(() => {
   }
 })
 
+// Watch for src changes and reset loading state
+watch(() => props.src, (newSrc, oldSrc) => {
+  if (newSrc !== oldSrc) {
+    // Reset loading state when image source changes
+    isLoaded.value = false
+    hasError.value = false
+    isLoading.value = true
+    emit('loading-start')
+  }
+})
+
 // Expose methods for parent components
 defineExpose({
   reload: () => {