FEAT: Splash Screen

todo: loading status and percent

src/lib/components/Splash.svelte

@@ -0,0 +1,34 @@
+<script>
+	let { loadingState } = $props();
+</script>
+
+<div class="splash">
+	{#if loadingState == 'loading'}
+		<div class="spinner">
+			<pre class="monospace">
+  ▄▄▄▄▄
+ ██▀▀▀▀█▄                      █▄ █▄
+ ▀██▄  ▄▀ ▄                   ▄██▄██    ▀▀
+   ▀██▄▄  ███▄███▄ ▄███▄ ▄███▄ ██ ████▄ ██ ▄█▀█▄
+ ▄   ▀██▄ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██▄█▀
+ ▀██████▀▄██ ██ ▀█▄▀███▀▄▀███▀▄██▄██ ██▄██▄▀█▄▄▄
+			</pre>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.splash {
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+	.spinner {
+	}
+	.monospace {
+		font-family: monospace;
+		color: var(--black);
+	}
+</style>

src/routes/+page.svelte

@@ -1,28 +1,38 @@
 <script>
-	import '@webtui/css/components/spinner.css';
-	import { setupTrayIcon } from '$lib/trayicon';
-	import { fade } from 'svelte/transition';
+	// LIBS
+	import { getVersion } from '@tauri-apps/api/app';
 	import { onMount } from 'svelte';
-	import { getSettings, currentSettings } from '$lib/settings.js';
+	import { fade } from 'svelte/transition';
+	import '@webtui/css/components/spinner.css';
+
+	// MODULES
+	import { setupTrayIcon } from '$lib/trayicon';
+	import { getSettings, currentSettings } from '$lib/settings';
+	import { getInstalledVersions, currentInstalledVersions } from '$lib/library';
 	import { getBlenderReleases, blenderReleases } from '$lib/blenderfetch';
-	import { getInstalledVersions, currentInstalledVersions } from '$lib/library.js';
-	import { downloadTasksStore } from '$lib/download.js';
+	import { downloadTasksStore } from '$lib/download';
+
+	// COMPONENTS
 	import Library from '$lib/components/Library.svelte';
 	import Download from '$lib/components/Download.svelte';
 	import Settings from '$lib/components/Settings.svelte';
 	import Popup from '$lib/components/Popup.svelte';
 	import Dialog from '$lib/components/Dialog.svelte';
+	import Splash from '$lib/components/Splash.svelte';
 
+	// states
 	let fadeInSettings = { duration: 100 };
 	let fadeOutSettings = { duration: 100, delay: fadeInSettings.duration };
-	let activeTab = 'library';
-	let blenderVersions = [];
-	let installedVersions = [];
-	let downloadTasks = [];
-	let settings = {};
-	let initialized = false;
+	let activeTab = $state('library');
+	let blenderVersions = $state([]);
+	let installedVersions = $state([]);
+	let downloadTasks = $state([]);
+	let settings = $state();
+	let initialized = $state(false);
+	let version = $state('');
+	let loadingState = $state('loading'); // load, update, initialized
 
-	function initStoresListeners() {
+	async function initStoresListeners() {
 		currentSettings.subscribe((value) => {
 			settings = value;
 			console.log('Loaded settings:', settings);
@@ -42,26 +52,13 @@
 	}
 
 	onMount(async () => {
-		const startTime = Date.now();
-
+		version = await getVersion();
 		await getSettings();
 		await getBlenderReleases();
 		await getInstalledVersions();
 		await setupTrayIcon();
-
-		initStoresListeners();
-		const elapsed = Date.now() - startTime;
-		if (elapsed < 2000) {
-			initialized = true;
-			/*			setTimeout(() => {
-			initialized = true;
-		}, 2000 - elapsed);*/
-		} else {
-			initialized = true;
-		}
-
-		//await getInstalledVersions();
-		//
+		await initStoresListeners();
+		loadingState = 'initialized';
 	});
 </script>
 
@@ -69,7 +66,7 @@
 <Dialog />
 
 <div id="main">
-	{#if initialized}
+	{#if loadingState == 'initialized'}
 		<div class="tablist" role="tablist">
 			<div
 				role="tab"
@@ -122,8 +119,11 @@
 				{/if}
 			</div>
 		</div>
+		<div class="version">v{version}</div>
 	{:else}
-		LOADING...
+		<div class="splash-wrapper" in:fade={{ duration: 100 }} out:fade={{ delay: 50, duration: 200 }}>
+			<Splash {loadingState} />
+		</div>
 	{/if}
 </div>
 
@@ -207,4 +207,21 @@
 		width: 100%;
 		height: 100%;
 	}
+	.version {
+		position: fixed;
+		bottom: 2rem;
+		right: 2rem;
+		z-index: 2;
+		text-align: right;
+		color: var(--light-accent);
+	}
+	.splash-wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: var(--white);
+		z-index: 1;
+	}
 </style>