From b69be281f38f65e42bf7c71ae6bddc4690429a89 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 28 Sep 2025 13:01:50 +0200
Subject: [PATCH] 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      |  1 +
 src/components/ui/image/ProgressiveImage.vue | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/image/ImageViewer.vue b/src/components/ui/image/ImageViewer.vue
index 9259a15..c0e0220 100644
--- a/src/components/ui/image/ImageViewer.vue
+++ b/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"
diff --git a/src/components/ui/image/ProgressiveImage.vue b/src/components/ui/image/ProgressiveImage.vue
index 042546c..cb82a3a 100644
--- a/src/components/ui/image/ProgressiveImage.vue
+++ b/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: () => {