improve initialization

src/lib/spells/create-init.svelte.ts

@@ -1,10 +1,10 @@
-export function createInit(cb: () => void) {
+export function createInit(cb: () => void | Promise<void>) {
 	let called = $state(false);
 
-	function init() {
+	async function init() {
 		if (called) return;
 		called = true;
-		cb();
+		await cb();
 	}
 
 	return Object.defineProperties(init, {

src/lib/state/conversations.svelte.ts

@@ -283,7 +283,19 @@ class Conversations {
 
 	#active = $derived.by(() => this.for(projects.activeId));
 
-	init = createInit(() => {
+	init = createInit(async () => {
+		// Load all conversations from all projects
+		await Promise.all(
+			projects.all.map(async p => {
+				const c = await conversationsRepo.find({ where: { projectId: p.id } });
+				if (!c.length) {
+					const dc = conversationsRepo.create(getDefaultConversation(p.id));
+					c.push(dc);
+				}
+				this.#conversations = { ...this.#conversations, [p.id]: c.map(c => new ConversationClass(c)) };
+			}),
+		);
+
 		const searchParams = new URLSearchParams(window.location.search);
 		const searchProvider = searchParams.get("provider") ?? "";
 		const searchModelId = searchParams.get("modelId") ?? "";
@@ -291,7 +303,7 @@ class Conversations {
 		const searchModel = models.remote.find(m => m.id === searchModelId);
 		if (!searchModel) return;
 
-		conversationsRepo
+		await conversationsRepo
 			.upsert({
 				where: { projectId: DEFAULT_PROJECT_ID },
 				set: {
@@ -338,17 +350,6 @@ class Conversations {
 	};
 
 	for = (projectId: ProjectEntity["id"]): ConversationClass[] => {
-		// Async load from db
-		if (!this.#conversations[projectId]?.length) {
-			conversationsRepo.find({ where: { projectId } }).then(c => {
-				if (!c.length) {
-					const dc = conversationsRepo.create(getDefaultConversation(projectId));
-					c.push(dc);
-				}
-				this.#conversations = { ...this.#conversations, [projectId]: c.map(c => new ConversationClass(c)) };
-			});
-		}
-
 		let res = this.#conversations[projectId];
 		if (res?.length === 0 || !res) {
 			// We set id to -1 because it is temporary, there should always be a conversation.

src/lib/state/models.svelte.ts

@@ -15,13 +15,6 @@ class Models {
 	all = $derived([...this.remote, ...this.custom]);
 
 	constructor() {
-		getModels().then(models => {
-			this.remote = models;
-		});
-		getRouterData().then(data => {
-			this.routerData = data;
-		});
-
 		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
 		if (!savedData) return;
 
@@ -34,6 +27,13 @@ class Models {
 		}
 	}
 
+	async load() {
+		await Promise.all([getModels(), getRouterData()]).then(([models, data]) => {
+			this.remote = models;
+			this.routerData = data;
+		});
+	}
+
 	#custom = $state.raw<CustomModel[]>([]);
 
 	get custom() {

src/lib/state/projects.svelte.ts

@@ -4,6 +4,7 @@ import { Entity, Fields, repo, type MembersOnly } from "remult";
 import { PersistedState } from "runed";
 import { checkpoints } from "./checkpoints.svelte";
 import { conversations } from "./conversations.svelte";
+import { createInit } from "$lib/spells/create-init.svelte";
 
 @Entity("project")
 export class ProjectEntity {
@@ -46,16 +47,15 @@ class Projects {
 		this.#activeId.current = id;
 	}
 
-	constructor() {
-		projectsRepo.find().then(res => {
-			if (!res.some(p => p.id === this.activeId)) this.activeId === DEFAULT_PROJECT_ID;
+	init = createInit(async () => {
+		const res = await projectsRepo.find();
+		if (!res.some(p => p.id === this.activeId)) this.activeId === DEFAULT_PROJECT_ID;
 
-			res.forEach(p => {
-				if (dequal(this.#projects[p.id], p)) return;
-				this.#projects[p.id] = p;
-			});
+		res.forEach(p => {
+			if (dequal(this.#projects[p.id], p)) return;
+			this.#projects[p.id] = p;
 		});
-	}
+	});
 
 	async create(args: Omit<ProjectEntity, "id">): Promise<string> {
 		const p = await projectsRepo.save({ ...args });

src/routes/+layout.svelte

@@ -5,7 +5,6 @@
 	import Prompts from "$lib/components/prompts.svelte";
 	import QuotaModal from "$lib/components/quota-modal.svelte";
 	import ShareModal from "$lib/components/share-modal.svelte";
-	import { conversations } from "$lib/state/conversations.svelte";
 	import "../app.css";
 
 	interface Props {
@@ -13,13 +12,12 @@
 	}
 
 	let { children }: Props = $props();
-	conversations.init();
 </script>
 
 <svelte:boundary>
 	{@render children?.()}
 	{#snippet pending()}
-		<!-- pending -->
+		<p class="abs-center absolute dark:text-white">🤗</p>
 	{/snippet}
 </svelte:boundary>
 

src/routes/+page.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
 	import Playground from "$lib/components/inference-playground/playground.svelte";
+	import { conversations } from "$lib/state/conversations.svelte";
+	import { models } from "$lib/state/models.svelte";
+	import { projects } from "$lib/state/projects.svelte";
+
+	await models.load();
+	await projects.init();
+	await conversations.init();
 </script>
 
 <Playground />