From 16c69cce39b057b2e3e9532151437d95937251fe Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Fri, 24 Jan 2025 08:52:26 -0800
Subject: [PATCH] Review

---
 .../project-view/graphRenderNodes.spec.ts              | 10 ++++++++++
 app/gui/src/project-view/util/getIconName.ts           |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/gui/integration-test/project-view/graphRenderNodes.spec.ts b/app/gui/integration-test/project-view/graphRenderNodes.spec.ts
index 3e21fcf4cd73..4cf5aa80de1b 100644
--- a/app/gui/integration-test/project-view/graphRenderNodes.spec.ts
+++ b/app/gui/integration-test/project-view/graphRenderNodes.spec.ts
@@ -1,6 +1,7 @@
 import { test } from '@playwright/test'
 import * as actions from './actions'
 import { expect } from './customExpect'
+import { mockExpressionUpdate } from './expressionUpdates'
 import * as locate from './locate'
 
 test('graph can open and render nodes', async ({ page }) => {
@@ -16,3 +17,12 @@ test('graph can open and render nodes', async ({ page }) => {
   const finalNode = locate.graphNodeByBinding(page, 'final')
   await expect(finalNode.locator('.WidgetToken')).toHaveText(['Main', '.', 'func1', 'prod'])
 })
+
+test('Component icon indicates evaluation in progress', async ({ page }) => {
+  await actions.goToGraph(page)
+
+  const node = locate.graphNodeByBinding(page, 'final')
+  await expect(node.locator('.WidgetIcon .LoadingSpinner')).not.toBeVisible()
+  await mockExpressionUpdate(page, 'final', { payload: { type: 'Pending', progress: 0.1 } })
+  await expect(node.locator('.WidgetIcon .LoadingSpinner')).toBeVisible()
+})
diff --git a/app/gui/src/project-view/util/getIconName.ts b/app/gui/src/project-view/util/getIconName.ts
index 8cdd32a62e07..5c1248b9242f 100644
--- a/app/gui/src/project-view/util/getIconName.ts
+++ b/app/gui/src/project-view/util/getIconName.ts
@@ -83,8 +83,8 @@ export function useDisplayedIcon(
   baseIcon: ToValue<Icon | URLString>,
 ) {
   const evaluating = computed(() => {
-    const status = graphDb.getExpressionInfo(toValue(externalId))?.payload.type
-    return status === 'Pending' || status === undefined
+    const payload = graphDb.getExpressionInfo(toValue(externalId))?.payload
+    return payload?.type === 'Pending' && payload.progress
   })
   return {
     displayedIcon: computed(() => (evaluating.value ? '$evaluating' : toValue(baseIcon))),