From 9e4025a3410ee4585f33aeb6e609b34c526267a1 Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Tue, 16 Dec 2025 04:31:15 +0900
Subject: [PATCH] [backport core/1.34] fix: loading state to show loader only
 if it takes more than 250ms (#7503)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #7268 to `core/1.34`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7503-backport-core-1-34-fix-loading-state-to-show-loader-only-if-it-takes-more-than-250ms-2ca6d73d365081a791e8f38454c74c28)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
---
 .../vueNodes/components/ImagePreview.vue      | 45 ++++++++++---------
 .../vueNodes/components/ImagePreview.test.ts  | 10 -----
 2 files changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 52db6b6580..4429c50322 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -29,24 +29,16 @@
         </p>
       </div>
       <!-- Loading State -->
-      <Skeleton
-        v-if="isLoading && !imageError"
-        border-radius="5px"
-        width="100%"
-        height="100%"
-      />
+      <div v-if="showLoader && !imageError" class="size-full">
+        <Skeleton border-radius="5px" width="100%" height="100%" />
+      </div>
       <!-- Main Image -->
       <img
         v-if="!imageError"
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        :class="
-          cn(
-            'block size-full object-contain pointer-events-none',
-            isLoading && 'invisible'
-          )
-        "
+        class="block size-full object-contain pointer-events-none"
         @load="handleImageLoad"
         @error="handleImageError"
       />
@@ -91,7 +83,7 @@
       <span v-if="imageError" class="text-red-400">
         {{ $t('g.errorLoadingImage') }}
       </span>
-      <span v-else-if="isLoading" class="text-base-foreground">
+      <span v-else-if="showLoader" class="text-base-foreground">
         {{ $t('g.loading') }}...
       </span>
       <span v-else>
@@ -117,6 +109,7 @@
 </template>
 
 <script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
 import { useToast } from 'primevue'
 import Skeleton from 'primevue/skeleton'
 import { computed, ref, watch } from 'vue'
@@ -126,7 +119,6 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { cn } from '@/utils/tailwindUtil'
 
 interface ImagePreviewProps {
   /** Array of image URLs to display */
@@ -149,10 +141,19 @@ const currentIndex = ref(0)
 const isHovered = ref(false)
 const actualDimensions = ref<string | null>(null)
 const imageError = ref(false)
-const isLoading = ref(false)
+const showLoader = ref(false)
 
 const currentImageEl = ref<HTMLImageElement>()
 
+const { start: startDelayedLoader, stop: stopDelayedLoader } = useTimeoutFn(
+  () => {
+    showLoader.value = true
+  },
+  250,
+  // Make sure it doesnt run on component mount
+  { immediate: false }
+)
+
 // Computed values
 const currentImageUrl = computed(() => props.imageUrls[currentIndex.value])
 const hasMultipleImages = computed(() => props.imageUrls.length > 1)
@@ -169,17 +170,19 @@ watch(
 
     // Reset loading and error states when URLs change
     actualDimensions.value = null
+
     imageError.value = false
-    isLoading.value = newUrls.length > 0
+    if (newUrls.length > 0) startDelayedLoader()
   },
-  { deep: true }
+  { deep: true, immediate: true }
 )
 
 // Event handlers
 const handleImageLoad = (event: Event) => {
   if (!event.target || !(event.target instanceof HTMLImageElement)) return
   const img = event.target
-  isLoading.value = false
+  stopDelayedLoader()
+  showLoader.value = false
   imageError.value = false
   if (img.naturalWidth && img.naturalHeight) {
     actualDimensions.value = `${img.naturalWidth} x ${img.naturalHeight}`
@@ -187,7 +190,8 @@ const handleImageLoad = (event: Event) => {
 }
 
 const handleImageError = () => {
-  isLoading.value = false
+  stopDelayedLoader()
+  showLoader.value = false
   imageError.value = true
   actualDimensions.value = null
 }
@@ -230,8 +234,7 @@ const setCurrentIndex = (index: number) => {
   if (currentIndex.value === index) return
   if (index >= 0 && index < props.imageUrls.length) {
     currentIndex.value = index
-    actualDimensions.value = null
-    isLoading.value = true
+    startDelayedLoader()
     imageError.value = false
   }
 }
diff --git a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
index 50a91ee782..b1c5b19fce 100644
--- a/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
+++ b/tests-ui/tests/renderer/extensions/vueNodes/components/ImagePreview.test.ts
@@ -208,11 +208,6 @@ describe('ImagePreview', () => {
     await navigationDots[1].trigger('click')
     await nextTick()
 
-    // Simulate image load event to clear loading state
-    const component = wrapper.vm as any
-    component.isLoading = false
-    await nextTick()
-
     // Now should show second image
     const imgElement = wrapper.find('img')
     expect(imgElement.exists()).toBe(true)
@@ -265,11 +260,6 @@ describe('ImagePreview', () => {
     await navigationDots[1].trigger('click')
     await nextTick()
 
-    // Simulate image load event to clear loading state
-    const component = wrapper.vm as any
-    component.isLoading = false
-    await nextTick()
-
     // Alt text should update
     const imgElement = wrapper.find('img')
     expect(imgElement.exists()).toBe(true)