Review

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()
+})

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))),