refactor: Migrate loading state from svelte/store to runes

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/lib/util/loading.svelte.ts

@@ -0,0 +1,14 @@
+import type { LoadingState } from '$lib/types';
+
+export const loadingState = $state<LoadingState>({ loading: false });
+
+export const initLoading = async <T>(message: string, task: Promise<T>): Promise<T> => {
+  loadingState.loading = true;
+  loadingState.message = message;
+  try {
+    return await task;
+  } finally {
+    loadingState.loading = false;
+    loadingState.message = undefined;
+  }
+};

src/lib/util/loading.ts

@@ -1,20 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Writable } from 'svelte/store';
-import type { LoadingState } from '$lib/types';
-
-const defaultLoading: LoadingState = {
-  loading: false
-};
-
-export const loadingStateStore: Writable<LoadingState> = writable(defaultLoading);
-export const initLoading = async <T>(message: string, task: Promise<T>): Promise<T> => {
-  loadingStateStore.set({
-    loading: true,
-    message
-  });
-  const result: T = await task;
-  loadingStateStore.set({
-    loading: false
-  });
-  return result;
-};

src/lib/util/util.ts

@@ -1,7 +1,7 @@
 import { C } from '$/constants';
 import { env } from './env';
 import { loadDataFromUrl } from './fileLoaders/loader';
-import { initLoading } from './loading';
+import { initLoading } from './loading.svelte';
 import { isOnMermaidAI } from './migration/domainMigration';
 import { applyMigrations } from './migrations';
 import { initURLSubscription, loadState, updateCodeStore, verifyState } from './state.svelte';

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Toaster } from '$/components/ui/sonner/index.js';
-  import { loadingStateStore } from '$/util/loading';
+  import { loadingState } from '$/util/loading.svelte';
   import { toggleDarkTheme } from '$/util/state.svelte';
   import { initHandler } from '$/util/util';
   import { base } from '$app/paths';
@@ -45,12 +45,12 @@
   {@render children()}
 </main>
 
-{#if $loadingStateStore.loading}
+{#if loadingState.loading}
   <div
     class="absolute top-0 left-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
     <div class="my-auto text-4xl font-bold text-indigo-100">
       <div class="loader mx-auto"></div>
-      <div>{$loadingStateStore.message}</div>
+      <div>{loadingState.message}</div>
     </div>
   </div>
 {/if}