From dbf910ff38567db8aa5c6e26bd824f2769a1b576 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Tue, 17 May 2022 11:16:58 +0200
Subject: [PATCH] feat: PageLoader

---
 src/lib/components/PageLoader.svelte         | 35 ++++++++++++++++++++
 src/routes/__layout.svelte                   |  8 +++++
 src/routes/applications/[id]/__layout.svelte |  1 +
 3 files changed, 44 insertions(+)
 create mode 100644 src/lib/components/PageLoader.svelte

diff --git a/src/lib/components/PageLoader.svelte b/src/lib/components/PageLoader.svelte
new file mode 100644
index 000000000..edbbcd80c
--- /dev/null
+++ b/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>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 95c80565c..39303e0ea 100644
--- a/src/routes/__layout.svelte
+++ b/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">
diff --git a/src/routes/applications/[id]/__layout.svelte b/src/routes/applications/[id]/__layout.svelte
index db30336fa..1bf6096b0 100644
--- a/src/routes/applications/[id]/__layout.svelte
+++ b/src/routes/applications/[id]/__layout.svelte
@@ -140,6 +140,7 @@
 		$status.application.initialLoading = false;
 	}
 	onDestroy(() => {
+		$status.application.initialLoading = true;
 		clearInterval(statusInterval);
 	});
 	onMount(async () => {