fix canvas perf

package.json

@@ -80,7 +80,7 @@
 		"@dagrejs/dagre": "^1.1.5",
 		"@modelcontextprotocol/sdk": "^1.13.3",
 		"@tailwindcss/typography": "^0.5.16",
-		"@xyflow/svelte": "^1.2.4",
+		"@xyflow/svelte": "^1.3.0",
 		"dequal": "^2.0.3",
 		"eslint-plugin-svelte": "^3.12.2",
 		"marked": "^16.1.2",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ importers:
         specifier: ^0.5.16
         version: 0.5.16(tailwindcss@4.0.9)
       '@xyflow/svelte':
-        specifier: ^1.2.4
-        version: 1.2.4(svelte@5.38.10)
+        specifier: ^1.3.0
+        version: 1.3.0(svelte@5.38.10)
       dequal:
         specifier: ^2.0.3
         version: 2.0.3
@@ -1231,13 +1231,13 @@ packages:
   '@vitest/utils@3.1.4':
     resolution: {integrity: sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==}
 
-  '@xyflow/svelte@1.2.4':
-    resolution: {integrity: sha512-CygKmc3t+KevPdx9VEWa6Q0O7DegJ6qzYrOH5dQo5zp9Inm2cYAZpkUuk64ry9Djw/gwy7EvrJTjyXetuvBGOg==}
+  '@xyflow/svelte@1.3.0':
+    resolution: {integrity: sha512-WWFb8cCzFt1ZpUl8exEaG0uoKAr7Ib7I286vhoz/fKQx5idiHhOVOjhLUXKVo3XZBsR+SvHrBp30qBD2SBRmAQ==}
     peerDependencies:
       svelte: ^5.25.0
 
-  '@xyflow/system@0.0.68':
-    resolution: {integrity: sha512-QDG2wxIG4qX+uF8yzm1ULVZrcXX3MxPBoxv7O52FWsX87qIImOqifUhfa/TwsvLdzn7ic2DDBH1uI8TKbdNTYA==}
+  '@xyflow/system@0.0.69':
+    resolution: {integrity: sha512-+KYwHDnsapZQ1xSgsYwOKYN93fUR770LwfCT5qrvcmzoMaabO1rHa6twiEk7E5VUIceWciF8ukgfq9JC83B5jQ==}
 
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
@@ -4431,13 +4431,13 @@ snapshots:
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
-  '@xyflow/svelte@1.2.4(svelte@5.38.10)':
+  '@xyflow/svelte@1.3.0(svelte@5.38.10)':
     dependencies:
       '@svelte-put/shortcut': 4.1.0(svelte@5.38.10)
-      '@xyflow/system': 0.0.68
+      '@xyflow/system': 0.0.69
       svelte: 5.38.10
 
-  '@xyflow/system@0.0.68':
+  '@xyflow/system@0.0.69':
     dependencies:
       '@types/d3-drag': 3.0.7
       '@types/d3-interpolate': 3.0.4

src/lib/state/models.svelte.ts

@@ -31,11 +31,19 @@ class Models {
 		}
 	}
 
+	get ready() {
+		return this.loading === null && this.remote.length > 0;
+	}
+
 	async load() {
-		if (this.loading || this.remote.length > 0) {
+		if (this.loading !== null) {
 			return await this.loading;
 		}
 
+		if (this.remote.length > 0) {
+			return;
+		}
+
 		this.loading = Promise.all([getModels(), getRouterData()]).then(([models, data]) => {
 			this.remote = models;
 			this.routerData = data;

src/routes/canvas/+page.svelte

@@ -7,6 +7,7 @@
 	import IconAdd from "~icons/lucide/plus";
 	import ChatNode from "./chat-node.svelte";
 	import { edges, nodes } from "./state.js";
+	import { models } from "$lib/state/models.svelte";
 
 	const nodeTypes = { chat: ChatNode } as const;
 
@@ -34,6 +35,8 @@
 	const throttledSave = useDebounce((n: Node[]) => {
 		nodes.current = n;
 	}, 100);
+
+	await models.load();
 </script>
 
 <div class="h-screen w-screen bg-gray-50">
@@ -57,21 +60,23 @@
 		</button>
 	</header>
 
-	<SvelteFlow
-		bind:nodes={
-			() => derivedNodes,
-			v => {
-				derivedNodes = v;
-				throttledSave(v);
+	{#if models.ready}
+		<SvelteFlow
+			bind:nodes={
+				() => derivedNodes,
+				v => {
+					derivedNodes = v;
+					throttledSave(v);
+				}
 			}
-		}
-		bind:edges={edges.current}
-		fitView
-		{nodeTypes}
-		defaultEdgeOptions={edgeOptions}
-	>
-		<MiniMap pannable zoomable class="rounded-xl border border-gray-200 bg-white shadow-sm" />
-		<Controls class="rounded-xl border border-gray-200 bg-white shadow-sm" />
-		<Background gap={20} size={1} />
-	</SvelteFlow>
+			bind:edges={edges.current}
+			fitView
+			{nodeTypes}
+			defaultEdgeOptions={edgeOptions}
+		>
+			<MiniMap pannable zoomable class="rounded-xl border border-gray-200 bg-white shadow-sm" />
+			<Controls class="rounded-xl border border-gray-200 bg-white shadow-sm" />
+			<Background gap={20} size={1} />
+		</SvelteFlow>
+	{/if}
 </div>

src/routes/canvas/chat-node.svelte

@@ -22,8 +22,6 @@
 	};
 	let { id, data }: Props = $props();
 
-	await models.load();
-
 	let { updateNodeData, updateNode, getNode } = useSvelteFlow();
 	onMount(() => {
 		if (!data.modelId) data.modelId = models.trending[0]?.id;