cheap perf improvement

package.json

@@ -60,7 +60,7 @@
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.4.0",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"runed": "^0.25.0",
+		"runed": "^0.31.1",
 		"shiki": "^3.4.0",
 		"svelte": "^5.38.7",
 		"svelte-check": "^4.3.1",

pnpm-lock.yaml

@@ -166,8 +166,8 @@ importers:
         specifier: ^0.6.11
         version: 0.6.11(prettier-plugin-svelte@3.4.0(prettier@3.5.3)(svelte@5.38.7))(prettier@3.5.3)
       runed:
-        specifier: ^0.25.0
-        version: 0.25.0(svelte@5.38.7)
+        specifier: ^0.31.1
+        version: 0.31.1(svelte@5.38.7)
       shiki:
         specifier: ^3.4.0
         version: 3.4.0
@@ -2897,8 +2897,8 @@ packages:
     peerDependencies:
       svelte: ^5.7.0
 
-  runed@0.25.0:
-    resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==}
+  runed@0.31.1:
+    resolution: {integrity: sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ==}
     peerDependencies:
       svelte: ^5.7.0
 
@@ -6061,7 +6061,7 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.38.7
 
-  runed@0.25.0(svelte@5.38.7):
+  runed@0.31.1(svelte@5.38.7):
     dependencies:
       esm-env: 1.2.2
       svelte: 5.38.7

src/routes/canvas/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+	import { models } from "$lib/state/models.svelte";
+	import { projects } from "$lib/state/projects.svelte";
+	import type { Node } from "@xyflow/svelte";
 	import { Background, Controls, MiniMap, SvelteFlow } from "@xyflow/svelte";
 	import "@xyflow/svelte/dist/style.css";
+	import { useDebounce } from "runed";
+	import IconAdd from "~icons/lucide/plus";
 	import ChatNode from "./chat-node.svelte";
 	import { edges, nodes } from "./state.js";
-	import type { Node } from "@xyflow/svelte";
-	import IconAdd from "~icons/lucide/plus";
-	import { models } from "$lib/state/models.svelte";
-	import { projects } from "$lib/state/projects.svelte";
 
 	await models.load();
 	await projects.init();
@@ -31,6 +32,12 @@
 		};
 		nodes.current.push(newNode);
 	}
+
+	let derivedNodes = $derived(nodes.current);
+
+	const throttledSave = useDebounce((n: Node[]) => {
+		nodes.current = n;
+	}, 100);
 </script>
 
 <div class="h-screen w-screen bg-gray-50">
@@ -55,7 +62,13 @@
 	</header>
 
 	<SvelteFlow
-		bind:nodes={nodes.current}
+		bind:nodes={
+			() => derivedNodes,
+			v => {
+				derivedNodes = v;
+				throttledSave(v);
+			}
+		}
 		bind:edges={edges.current}
 		fitView
 		{nodeTypes}