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" />