fix test

e2e/playwright/desktop-export.spec.ts

@@ -54,6 +54,11 @@ test(
       const modelStateIndicator = page.getByTestId(
         'model-state-indicator-execution-done'
       )
+      const modelStateIndicatorLoading = page.getByTestId(
+        'model-state-indicator-loading'
+      )
+
+      await expect(modelStateIndicatorLoading).toBeVisible()
       await expect(modelStateIndicator).toBeVisible({ timeout: 60000 })
 
       const gltfOption = page.getByText('glTF')

src/components/ModelStateIndicator.tsx

@@ -1,45 +1,27 @@
-import { useEngineCommands } from './EngineCommands'
 import { Spinner } from './Spinner'
 import { CustomIcon } from './CustomIcon'
+import { useKclContext } from 'lang/KclProvider'
 
 export const ModelStateIndicator = () => {
-  const [commands] = useEngineCommands()
+  const { isExecuting } = useKclContext()
 
-  const lastCommandType = commands[commands.length - 1]?.type
+  if (isExecuting)
-
+    return (
-  let className = 'w-6 h-6 '
+      <div className="w-6 h-6" data-testid="model-state-indicator-loading">
-  let icon = <Spinner className={className} />
+        <Spinner className="w-6 h-6" />
-  let dataTestId = 'model-state-indicator'
+      </div>
-
-  if (lastCommandType === 'receive-reliable') {
-    className +=
-      'bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 rounded-sm bg-succeed-10/30 dark:bg-succeed'
-    icon = (
-      <CustomIcon
-        data-testid={dataTestId + '-receive-reliable'}
-        name="checkmark"
-      />
     )
-  } else if (lastCommandType === 'execution-done') {
-    className +=
-      'border-6 border border-solid border-chalkboard-60 dark:border-chalkboard-80 bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 rounded-sm bg-succeed-10/30 dark:bg-succeed'
-    icon = (
-      <CustomIcon
-        data-testid={dataTestId + '-execution-done'}
-        name="checkmark"
-      />
-    )
-  } else if (lastCommandType === 'export-done') {
-    className +=
-      'border-6 border border-solid border-chalkboard-60 dark:border-chalkboard-80 bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 rounded-sm bg-succeed-10/30 dark:bg-succeed'
-    icon = (
-      <CustomIcon data-testid={dataTestId + '-export-done'} name="checkmark" />
-    )
-  }
 
   return (
-    <div className={className} data-testid="model-state-indicator">
+    <div
-      {icon}
+      className="border-6 border border-solid border-chalkboard-60 dark:border-chalkboard-80 bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 rounded-sm bg-succeed-10/30 dark:bg-succeed"
+      data-testid="model-state-indicator"
+    >
+      <CustomIcon
+        data-testid="model-state-indicator-execution-done"
+        name="checkmark"
+        className="w-6 h-6"
+      />
     </div>
   )
 }