From 79bd8a4dd28c4c0729c9ec107e062e1b9db0f21f Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Mon, 29 Dec 2025 11:16:58 -0800
Subject: [PATCH] Update histroy for new outputs, spinner for active

A spinner is now displayed when  a job is actively executing
- Spinner has slightly incorrect sizing
- Only one spinner is displayed regardless of output count

History tracking change makes me very unhappy. I want to clean this up
to correctly leverage vue reactivity in the future, but required
functionality comes first
---
 src/views/GraphView.vue  |  2 +-
 src/views/LinearView.vue | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 58b428afd..57bd08115 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -211,7 +211,7 @@ const onStatus = async (e: CustomEvent<StatusWsMessageStatus>) => {
   await queueStore.update()
   // Only update assets if the assets sidebar is currently open
   // When sidebar is closed, AssetsSidebarTab.vue will refresh on mount
-  if (sidebarTabStore.activeSidebarTabId === 'assets') {
+  if (sidebarTabStore.activeSidebarTabId === 'assets' || linearMode.value) {
     await assetsStore.updateHistory()
   }
 }
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 1372bde7d..d1a06af59 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -34,16 +34,19 @@ import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
-import { useQueueSettingsStore } from '@/stores/queueStore'
+import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { cn } from '@/utils/tailwindUtil'
 
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const outputs = useMediaAssets('output')
 const nodeOutputStore = useNodeOutputStore()
+const queueStore = useQueueStore()
 const { isActiveSubscription } = useSubscription()
 const workflowStore = useWorkflowStore()
 
+const isRunning = computed(() => queueStore.runningTasks.length > 0)
+
 const graphNodes = shallowRef<LGraphNode[]>(app.rootGraph.nodes)
 useEventListener(
   app.rootGraph.events,
@@ -327,15 +330,13 @@ function handleCenterWheel(e: WheelEvent) {
           ref="outputsRef"
           class="h-full min-w-24 grow-1 p-3 overflow-y-auto border-r-1 border-node-component-border flex flex-col items-center"
         >
+          <linear-job v-if="isRunning" class="py-3 w-full aspect-square px-1">
+            <ProgressSpinner class="size-full" />
+          </linear-job>
           <linear-job
             v-for="(item, index) in outputs.media.value"
             :key="index"
-            :class="
-              cn(
-                'py-3 border-border-subtle flex flex-col w-full px-1',
-                index !== 0 && 'border-t-2'
-              )
-            "
+            class="py-3 border-border-subtle flex flex-col w-full px-1 first:border-t-0 border-t-2"
           >
             <img
               v-for="(output, key) in allOutputs(item)"
@@ -393,7 +394,8 @@ function handleCenterWheel(e: WheelEvent) {
             v-if="
               activeLoad[0] === -1 &&
               activeLoad[1] === -1 &&
-              nodeOutputStore.latestPreview[0]
+              nodeOutputStore.latestPreview[0] &&
+              isRunning
             "
             :src="nodeOutputStore.latestPreview[0]"
             v-bind="slotProps"