fix icon provider lag

src/lib/components/DebugMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
+	import { session } from "$lib/stores/session";
 	import { createPopover } from "@melt-ui/svelte";
 
 	let innerWidth: number;
 	let innerHeight: number;
-	let isDarkMode: boolean;
 
 	function toggleTheme() {
 		document.body.classList.toggle("dark");
@@ -43,6 +43,14 @@
 					>
 						Toggle Theme
 					</button>
+					<button
+						class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+						on:click={() => {
+							console.log($session);
+						}}
+					>
+						Log session to console
+					</button>
 				</div>
 			</div>
 		</div>
@@ -52,4 +60,3 @@
 <style>
 	/* Add any additional styles here */
 </style>
-

src/lib/components/Icons/IconProvider.svelte

@@ -27,6 +27,8 @@
 			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><rect x="3.34856" y="3.02654" width="19.9474" height="19.9474" rx="2.95009" fill="#FFD21E" stroke="#FFB41E" stroke-width="1.18004"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M7.69336 9.74609V16.9754H9.32329V13.9595H11.8181V16.9754H13.4591V9.74609H11.8181V12.5292H9.32329V9.74609H7.69336ZM15.1646 9.74609V16.9754H16.7945V14.1702H19.3004V12.7953H16.7945V11.121H19.7217V9.74609H15.1646Z" fill="#814D00"></path></svg>',
 	};
 
+	$: console.log("IconProvider", provider);
+
 	$: icon = provider && provider in icons ? icons[provider as keyof typeof icons] : null;
 </script>
 

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -6,12 +6,15 @@
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import IconProvider from "../Icons/IconProvider.svelte";
+	import { isMounted } from "$lib/stores/mounted";
+	import { browser } from "$app/environment";
 
 	export let conversation: Conversation;
 	let classes: string | undefined = undefined;
 	export { classes as class };
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
+		if (!browser) return;
 		const validProvider = providers.find(p => p.provider === conversation.provider);
 		if (validProvider) return;
 		conversation.provider = randomPick(providers)?.provider;
@@ -62,6 +65,8 @@
 
 		return words.join(" ");
 	}
+
+	const mounted = isMounted();
 </script>
 
 <div class="flex flex-col gap-2">
@@ -80,9 +85,11 @@
 			classes
 		)}
 	>
-		<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
-			<IconProvider provider={conversation.provider} />
-			{formatName(conversation.provider ?? "") ?? "loading"}
+		<div class="flex items-center gap-1 text-sm">
+			{#key $mounted}
+				<IconProvider provider={conversation.provider} />
+				{formatName(conversation.provider ?? "") ?? "loading"}
+			{/key}
 		</div>
 		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
 	</button>

src/lib/stores/mounted.ts

@@ -0,0 +1,9 @@
+import { onMount } from "svelte";
+import { readonly, writable } from "svelte/store";
+
+export function isMounted() {
+	const store = writable(false);
+	onMount(() => store.set(true));
+
+	return readonly(store);
+}

src/routes/+layout.svelte

@@ -5,4 +5,3 @@
 
 <slot />
 <DebugMenu />
-