fix: Implement Vue-based spinner for image upload in Nodes 2.0 mode (#9227)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/composables/node/useNodeImageUpload.test.ts

@@ -2,11 +2,13 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
-const { mockFetchApi, mockAddAlert, mockUpdateInputs } = vi.hoisted(() => ({
-  mockFetchApi: vi.fn(),
-  mockAddAlert: vi.fn(),
-  mockUpdateInputs: vi.fn()
-}))
+const { mockFetchApi, mockAddAlert, mockUpdateInputs, mockSetNodeUploading } =
+  vi.hoisted(() => ({
+    mockFetchApi: vi.fn(),
+    mockAddAlert: vi.fn(),
+    mockUpdateInputs: vi.fn(),
+    mockSetNodeUploading: vi.fn()
+  }))
 
 let capturedDragOnDrop: (files: File[]) => Promise<string[]>
 
@@ -43,6 +45,10 @@ vi.mock('@/stores/assetsStore', () => ({
   useAssetsStore: () => ({ updateInputs: mockUpdateInputs })
 }))
 
+vi.mock('@/stores/nodeOutputStore', () => ({
+  useNodeOutputStore: () => ({ setNodeUploading: mockSetNodeUploading })
+}))
+
 function createMockNode(): LGraphNode {
   return {
     isUploading: false,

src/composables/node/useNodeImageUpload.ts

@@ -7,6 +7,7 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ResultItemType } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 
 const PASTED_IMAGE_EXPIRY_MS = 2000
 
@@ -92,12 +93,15 @@ export const useNodeImageUpload = (
     }
   }
 
+  const nodeOutputStore = useNodeOutputStore()
+
   const handleUploadBatch = async (files: File[]) => {
     if (node.isUploading) {
       useToastStore().addAlert(t('g.uploadAlreadyInProgress'))
       return []
     }
     node.isUploading = true
+    nodeOutputStore.setNodeUploading(node.id, true)
 
     try {
       node.imgs = undefined
@@ -114,6 +118,7 @@ export const useNodeImageUpload = (
       return validPaths
     } finally {
       node.isUploading = false
+      nodeOutputStore.setNodeUploading(node.id, false)
       node.graph?.setDirtyCanvas(true)
     }
   }

src/locales/en/main.json

@@ -176,6 +176,7 @@
     "control_before_generate": "control before generate",
     "choose_file_to_upload": "choose file to upload",
     "uploadAlreadyInProgress": "Upload already in progress",
+    "uploading": "Uploading",
     "capture": "capture",
     "nodes": "Nodes",
     "nodesCount": "{count} node | {count} nodes",

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -37,7 +37,7 @@
       </div>
       <!-- Main Image -->
       <img
-        v-if="!imageError"
+        v-if="!imageError && !isUploading"
         :src="currentImageUrl"
         :alt="imageAltText"
         class="pointer-events-none absolute inset-0 block size-full object-contain"
@@ -45,6 +45,16 @@
         @error="handleImageError"
       />
 
+      <!-- Upload Spinner Overlay -->
+      <div
+        v-if="isUploading"
+        class="absolute inset-0 flex items-center justify-center"
+      >
+        <i
+          class="icon-[lucide--loader-circle] size-8 animate-spin text-base-foreground"
+        />
+      </div>
+
       <!-- Floating Action Buttons (appear on hover and focus) -->
       <div
         v-if="isHovered || isFocused"
@@ -85,7 +95,10 @@
 
     <!-- Image Dimensions -->
     <div class="pt-2 text-center text-xs text-base-foreground">
-      <span v-if="imageError" class="text-red-400">
+      <span v-if="isUploading" class="text-base-foreground">
+        {{ $t('g.uploading') }}...
+      </span>
+      <span v-else-if="imageError" class="text-red-400">
         {{ $t('g.errorLoadingImage') }}
       </span>
       <span v-else-if="showLoader" class="text-base-foreground">
@@ -134,6 +147,8 @@ interface ImagePreviewProps {
   readonly imageUrls: readonly string[]
   /** Optional node ID for context-aware actions */
   readonly nodeId?: string
+  /** Whether a file is being uploaded to this node */
+  readonly isUploading?: boolean
 }
 
 const props = defineProps<ImagePreviewProps>()

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -122,6 +122,7 @@
             v-if="nodeMedia"
             :node-data="nodeData"
             :media="nodeMedia"
+            :is-uploading="isNodeUploading"
           />
           <NodeContent
             v-for="preview in promotedPreviews"
@@ -744,6 +745,8 @@ const nodeMedia = computed(() => {
   return { type, urls } as const
 })
 
+const isNodeUploading = computed(() => nodeOutputs.isNodeUploading(nodeData.id))
+
 const nodeContainerRef = ref<HTMLDivElement>()
 
 // Drag and drop support

src/renderer/extensions/vueNodes/components/NodeContent.vue

@@ -20,6 +20,7 @@
         v-else-if="hasMedia && media?.type === 'image'"
         :image-urls="media.urls"
         :node-id="nodeId"
+        :is-uploading="isUploading"
         class="mt-2 flex-auto"
       />
     </slot>
@@ -43,14 +44,15 @@ interface NodeContentProps {
     type: 'image' | 'video' | 'audio'
     urls: string[]
   }
+  isUploading?: boolean
 }
 
-const props = defineProps<NodeContentProps>()
+const { nodeData, media, isUploading = false } = defineProps<NodeContentProps>()
 
-const hasMedia = computed(() => props.media && props.media.urls.length > 0)
+const hasMedia = computed(() => media && media.urls.length > 0)
 
 // Get node ID from nodeData
-const nodeId = computed(() => props.nodeData?.id?.toString())
+const nodeId = computed(() => nodeData?.id?.toString())
 
 // Error boundary implementation
 const renderError = ref<string | null>(null)

src/stores/nodeOutputStore.ts

@@ -48,6 +48,22 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const scheduledRevoke: Record<NodeLocatorId, { stop: () => void }> = {}
   const latestPreview = ref<string[]>([])
 
+  const uploadingNodeIds = ref(new Set<string>())
+
+  function setNodeUploading(nodeId: string | number, uploading: boolean) {
+    const id = String(nodeId)
+    if (uploading) {
+      uploadingNodeIds.value.add(id)
+    } else {
+      uploadingNodeIds.value.delete(id)
+    }
+    uploadingNodeIds.value = new Set(uploadingNodeIds.value)
+  }
+
+  function isNodeUploading(nodeId: string | number): boolean {
+    return uploadingNodeIds.value.has(String(nodeId))
+  }
+
   function scheduleRevoke(locator: NodeLocatorId, cb: () => void) {
     scheduledRevoke[locator]?.stop()
 
@@ -463,6 +479,10 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     restoreOutputs,
     resetAllOutputsAndPreviews,
 
+    // Upload state
+    setNodeUploading,
+    isNodeUploading,
+
     // State
     nodeOutputs,
     nodePreviewImages,