From 9ef843d4922be5eb371d00cf928139f4cd3e959c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 27 Apr 2024 18:59:20 -0400
Subject: [PATCH] refac: splash screen

---
 src/app.html              | 42 ++++++++++++++++++++++++++++++---------
 src/routes/+layout.svelte | 15 ++------------
 2 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/app.html b/src/app.html
index 69407f70a..e76e9079a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -50,15 +50,39 @@
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 
-		<div id="splash-screen" style="min-height: 100vh; height: 100dvh; display: flex">
-			<div style="margin: auto">
-				<img
-					src="/logo.svg"
-					alt="logo"
-					style="width: 6rem; height: 6rem; margin-bottom: 2rem"
-					draggable="false"
-				/>
-			</div>
+		<div
+			id="splash-screen"
+			style="
+				position: fixed;
+				z-index: 100;
+				background: #fff;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			"
+		>
+			<style type="text/css" nonce="">
+				html {
+					overflow-y: scroll !important;
+				}
+			</style>
+
+			<img
+				style="
+					position: absolute;
+					width: 6rem;
+					height: 6rem;
+					top: 45%;
+					left: 50%;
+					margin: -40px 0 0 -40px;
+				"
+				src="/logo.svg"
+			/>
+
+			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
+				Footer content
+			</span> -->
 		</div>
 	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f81e39597..db43a0312 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,8 +20,6 @@
 	let loaded = false;
 
 	onMount(async () => {
-		document.getElementById('splash-screen')?.remove();
-
 		theme.set(localStorage.theme);
 		// Check Backend Status
 		const backendConfig = await getBackendConfig();
@@ -64,6 +62,8 @@
 		}
 
 		await tick();
+
+		document.getElementById('splash-screen')?.remove();
 		loaded = true;
 	});
 </script>
@@ -80,17 +80,6 @@
 
 {#if loaded}
 	<slot />
-{:else}
-	<div class=" min-h-screen h-[100dvh] flex">
-		<div class="m-auto">
-			<img
-				src="/logo.svg"
-				alt="logo"
-				class=" size-24 rounded-full border-[1px] border-gray-200 dark:border-none mx-auto mb-8"
-				draggable="false"
-			/>
-		</div>
-	</div>
 {/if}
 
 <Toaster richColors position="top-center" />