refac: splash screen

This commit is contained in:
Timothy J. Baek 2024-04-27 18:59:20 -04:00
parent 975e078f4d
commit 9ef843d492
2 changed files with 35 additions and 22 deletions

View file

@ -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>

View file

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