enh: workspace loading indicator

src/lib/components/workspace/Knowledge.svelte

@@ -23,6 +23,9 @@
 	import Badge from '../common/Badge.svelte';
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
+	import Spinner from '../common/Spinner.svelte';
+
+	let loaded = false;
 
 	let query = '';
 	let selectedItem = null;
@@ -61,6 +64,7 @@
 
 	onMount(async () => {
 		knowledgeBases = await getKnowledgeBaseList(localStorage.token);
+		loaded = true;
 	});
 </script>
 
@@ -70,6 +74,7 @@
 	</title>
 </svelte:head>
 
+{#if loaded}
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}
 		on:confirm={() => {
@@ -171,3 +176,8 @@
 	<div class=" text-gray-500 text-xs mt-1 mb-2">
 		ⓘ {$i18n.t("Use '#' in the prompt input to load and include your knowledge.")}
 	</div>
+{:else}
+	<div class="w-full h-full flex justify-center items-center">
+		<Spinner />
+	</div>
+{/if}

src/lib/components/workspace/Models.svelte

@@ -31,11 +31,13 @@
 	import Plus from '../icons/Plus.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
 	import Switch from '../common/Switch.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	let shiftKey = false;
 
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
+	let loaded = false;
 
 	let models = [];
 
@@ -149,6 +151,8 @@
 	onMount(async () => {
 		models = await getWorkspaceModels(localStorage.token);
 
+		loaded = true;
+
 		const onKeyDown = (event) => {
 			if (event.key === 'Shift') {
 				shiftKey = true;
@@ -183,6 +187,7 @@
 	</title>
 </svelte:head>
 
+{#if loaded}
 	<ModelDeleteConfirmDialog
 		bind:show={showModelDeleteConfirm}
 		on:confirm={() => {
@@ -388,9 +393,11 @@
 							for (const model of savedModels) {
 								if (model?.info ?? false) {
 									if ($_models.find((m) => m.id === model.id)) {
-									await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
+										await updateModelById(localStorage.token, model.id, model.info).catch(
+											(error) => {
 												return null;
-									});
+											}
+										);
 									} else {
 										await createNewModel(localStorage.token, model.info).catch((error) => {
 											return null;
@@ -484,3 +491,8 @@
 			</a>
 		</div>
 	{/if}
+{:else}
+	<div class="w-full h-full flex justify-center items-center">
+		<Spinner />
+	</div>
+{/if}

src/lib/components/workspace/Prompts.svelte

@@ -20,9 +20,11 @@
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 	let promptsImportInputElement: HTMLInputElement;
+	let loaded = false;
 
 	let importFiles = '';
 	let query = '';
@@ -78,6 +80,7 @@
 
 	onMount(async () => {
 		await init();
+		loaded = true;
 	});
 </script>
 
@@ -87,6 +90,7 @@
 	</title>
 </svelte:head>
 
+{#if loaded}
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}
 		title={$i18n.t('Delete prompt?')}
@@ -317,3 +321,8 @@
 			</a>
 		</div>
 	{/if}
+{:else}
+	<div class="w-full h-full flex justify-center items-center">
+		<Spinner />
+	</div>
+{/if}

src/lib/components/workspace/Tools.svelte

@@ -29,10 +29,12 @@
 	import Search from '../icons/Search.svelte';
 	import Plus from '../icons/Plus.svelte';
 	import ChevronRight from '../icons/ChevronRight.svelte';
+	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
 	let shiftKey = false;
+	let loaded = false;
 
 	let toolsImportInputElement: HTMLInputElement;
 	let importFiles;
@@ -131,8 +133,10 @@
 		_tools.set(await getTools(localStorage.token));
 	};
 
-	onMount(() => {
+	onMount(async () => {
-		init();
+		await init();
+		loaded = true;
+
 		const onKeyDown = (event) => {
 			if (event.key === 'Shift') {
 				shiftKey = true;
@@ -167,6 +171,7 @@
 	</title>
 </svelte:head>
 
+{#if loaded}
 	<div class="flex flex-col gap-1 mt-1.5 mb-2">
 		<div class="flex justify-between items-center">
 			<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
@@ -494,3 +499,8 @@
 			</div>
 		</div>
 	</ConfirmDialog>
+{:else}
+	<div class="w-full h-full flex justify-center items-center">
+		<Spinner />
+	</div>
+{/if}