From 101da328ff9776e12e8f48a40b37e8d646c53991 Mon Sep 17 00:00:00 2001
From: Jordan Shatford <jordanshatford@live.com>
Date: Wed, 27 Sep 2023 14:58:08 +1000
Subject: [PATCH] feat(web): improved loading screen when setting up session

Signed-off-by: Jordan Shatford <jordanshatford@live.com>
---
 apps/web/src/lib/components/Loading.svelte | 16 +++------
 apps/web/src/routes/+layout.svelte         | 40 ++++++++++++----------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/lib/components/Loading.svelte b/apps/web/src/lib/components/Loading.svelte
index 8084e3cf..54c86a60 100644
--- a/apps/web/src/lib/components/Loading.svelte
+++ b/apps/web/src/lib/components/Loading.svelte
@@ -2,15 +2,9 @@
 	import { Icon, LoaderIcon } from '@yd/ui';
 </script>
 
-<div class="bg-white dark:bg-zinc-900">
-	<div class="flex h-screen">
-		<div class="m-auto text-center">
-			<div class="w-100 relative inline-block overflow-hidden align-middle">
-				<div class="h-48 text-zinc-900 dark:text-white">
-					<Icon src={LoaderIcon} class="h-50 relative inline-block animate-spin" />
-					<img class="absolute inset-6 h-36 w-auto" src="images/logo.png" alt="Logo" />
-				</div>
-			</div>
-		</div>
-	</div>
+<div
+	class="-mt-16 flex h-screen flex-col items-center justify-center space-y-2 text-zinc-900 dark:text-white"
+>
+	<Icon src={LoaderIcon} class="h-10 w-10 animate-spin" />
+	<div>Setting up session...</div>
 </div>
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index e6674308..b07471f2 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -7,9 +7,9 @@
 
 <script lang="ts">
 	import '../app.css';
-	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
 	import { Toasts, NavBar, Footer, ThemeToggle } from '@yd/ui';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
 	import Loading from '$lib/components/Loading.svelte';
 	import { session } from '$lib/stores/session';
 	import { downloads } from '$lib/stores/downloads';
@@ -22,29 +22,31 @@
 		return $session;
 	};
 
-	$: if ($session) {
+	session.setup();
+
+	$: if ($session && browser) {
 		downloads.setupStatusListener();
 	}
-
-	onMount(async () => {
-		await session.setup();
-	});
 </script>
 
+<svelte:head>
+	<title>{config.about.title}</title>
+</svelte:head>
+
 <Toasts position="bottom-right" />
 <div class="h-full min-h-screen dark:bg-zinc-900">
-	{#if $session}
-		<div class="h-full">
-			<NavBar links={navbarLinks} activeLink={$page.url.pathname}>
-				<Logo slot="logo" />
-				<ThemeToggle slot="right" />
-			</NavBar>
-			<main class="mx-auto h-full max-w-7xl px-4 pt-20 sm:px-6 lg:px-8">
+	<div class="h-full">
+		<NavBar links={navbarLinks} activeLink={$page.url.pathname}>
+			<Logo slot="logo" />
+			<ThemeToggle slot="right" />
+		</NavBar>
+		<main class="mx-auto h-full max-w-7xl px-4 pt-20 sm:px-6 lg:px-8">
+			{#if $session}
 				<slot />
-			</main>
-		</div>
-	{:else}
-		<Loading />
-	{/if}
+			{:else}
+				<Loading />
+			{/if}
+		</main>
+	</div>
 </div>
 <Footer copyright={config.copyright} links={footerLinks} githubLink={config.github} />