From a4f51efeaddb02e7f59963b1be0e01c5312b30fa Mon Sep 17 00:00:00 2001
From: Max Richter <max@max-richter.dev>
Date: Thu, 7 May 2026 17:01:44 +0200
Subject: [PATCH] feat: add spinning icon

---
 app/src/routes/+page.svelte        | 45 +++++++++++++++++++++++++-----
 packages/ui/src/lib/Spinner.svelte | 27 ++++++++++++++++++
 2 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/lib/Spinner.svelte

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 70c8238..a6db613 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -29,6 +29,7 @@
   import { tutorialConfig } from '$lib/tutorial/tutorial-config';
   import { Planty } from '@nodarium/planty';
   import type { Graph, NodeInstance } from '@nodarium/types';
+  import { Spinner } from '@nodarium/ui';
   import { createPerformanceStore } from '@nodarium/utils';
   import type { Group } from 'three';
 
@@ -69,6 +70,7 @@
 
   let activeNode = $state<NodeInstance | undefined>(undefined);
   let scene = $state<Group>(null!);
+  let isExecuting = $state(false);
 
   let sidebarOpen = $state(false);
   let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
@@ -101,10 +103,16 @@
     }
   });
 
+  let timeout: ReturnType<typeof setTimeout>;
+
   async function update(
     g: Graph,
     s: Record<string, unknown> = $state.snapshot(graphSettings)
   ) {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      isExecuting = true;
+    }, 100);
     performanceStore.startRun();
     try {
       let a = performance.now();
@@ -129,6 +137,8 @@
     } catch (error) {
       console.log('errors', error);
     } finally {
+      clearTimeout(timeout);
+      isExecuting = false;
       performanceStore.stopRun();
     }
   }
@@ -248,13 +258,20 @@
   <header></header>
   <Grid.Row>
     <Grid.Cell>
-      <Viewer
-        bind:scene
-        bind:this={viewerComponent}
-        perf={performanceStore}
-        debugData={debugData}
-        centerCamera={appSettings.value.centerCamera}
-      />
+      <div class="viewer-cell">
+        <Viewer
+          bind:scene
+          bind:this={viewerComponent}
+          perf={performanceStore}
+          debugData={debugData}
+          centerCamera={appSettings.value.centerCamera}
+        />
+        {#if isExecuting}
+          <div class="viewer-spinner" aria-label="Executing graph">
+            <Spinner size={28} />
+          </div>
+        {/if}
+      </div>
     </Grid.Cell>
     <Grid.Cell>
       {#if pm.graph}
@@ -399,6 +416,20 @@
     grid-template-rows: 0px 1fr;
   }
 
+  .viewer-cell {
+    position: relative;
+    height: 100%;
+  }
+
+  .viewer-spinner {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    color: var(--color-text, #cecece);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
   .wrapper :global(canvas) {
     transition: opacity 0.3s ease;
     opacity: 1;
diff --git a/packages/ui/src/lib/Spinner.svelte b/packages/ui/src/lib/Spinner.svelte
new file mode 100644
index 0000000..a4c664d
--- /dev/null
+++ b/packages/ui/src/lib/Spinner.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    size?: number;
+    class?: string;
+  }
+  let { size = 20, class: _class = '' }: Props = $props();
+</script>
+
+<svg
+  class="animate-spin text-text shrink-0 {_class}"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-label="Loading"
+  role="status"
+>
+  <circle
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-dasharray="40 20"
+  />
+</svg>