feat: PageLoader

src/lib/components/PageLoader.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	let timeout;
+	const progress = tweened(0, {
+		duration: 2000,
+		easing: cubicOut
+	});
+
+	onMount(() => {
+		timeout = setTimeout(() => {
+			progress.set(0.7);
+		}, 500);
+	});
+	onDestroy(() => {
+		clearTimeout(timeout);
+	});
+</script>
+
+<div class="progress-bar">
+	<div class="progress-sliver" style={`--width: ${$progress * 100}%`} />
+</div>
+
+<style lang="postcss">
+	.progress-bar {
+		height: 0.2rem;
+		@apply fixed top-0 left-0 right-0;
+	}
+	.progress-sliver {
+		width: var(--width);
+		@apply h-full bg-coollabs;
+	}
+</style>

src/routes/__layout.svelte

@@ -38,12 +38,15 @@
 	import '../tailwind.css';
 	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
 	import { page, session } from '$app/stores';
+	import { fade } from 'svelte/transition';
 	import { onMount } from 'svelte';
 	import { errorNotification } from '$lib/form';
 	import { asyncSleep } from '$lib/components/common';
 	import { del, get, post } from '$lib/api';
 	import { dev } from '$app/env';
 	import { features, isTraefikUsed } from '$lib/store';
+	import { navigating } from '$app/stores';
+	import PageLoader from '$lib/components/PageLoader.svelte';
 
 	$isTraefikUsed = settings?.isTraefikUsed || false;
 
@@ -141,6 +144,11 @@
 	{/if}
 </svelte:head>
 <SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
+{#if $navigating}
+	<div out:fade={{ delay: 100 }}>
+		<PageLoader />
+	</div>
+{/if}
 {#if $session.userId}
 	<nav class="nav-main">
 		<div class="flex h-screen w-full flex-col items-center transition-all duration-100">

src/routes/applications/[id]/__layout.svelte

@@ -140,6 +140,7 @@
 		$status.application.initialLoading = false;
 	}
 	onDestroy(() => {
+		$status.application.initialLoading = true;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {