tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

refac: splash screen

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app.html
View file

@ -50,15 +50,39 @@
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
<div id="splash-screen" style="min-height: 100vh; height: 100dvh; display: flex"> <div
<div style="margin: auto"> 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 <img
style="
position: absolute;
width: 6rem;
height: 6rem;
top: 45%;
left: 50%;
margin: -40px 0 0 -40px;
"
src="/logo.svg" src="/logo.svg"
alt="logo"
style="width: 6rem; height: 6rem; margin-bottom: 2rem"
draggable="false"
/> />
</div>
<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
Footer content
</span> -->
</div> </div>
</body> </body>
</html> </html>

15
src/routes/+layout.svelte
View file

@ -20,8 +20,6 @@
let loaded = false; let loaded = false;
onMount(async () => { onMount(async () => {
document.getElementById('splash-screen')?.remove();
theme.set(localStorage.theme); theme.set(localStorage.theme);
// Check Backend Status // Check Backend Status
const backendConfig = await getBackendConfig(); const backendConfig = await getBackendConfig();
@ -64,6 +62,8 @@
} }
await tick(); await tick();
document.getElementById('splash-screen')?.remove();
loaded = true; loaded = true;
}); });
</script> </script>
@ -80,17 +80,6 @@
{#if loaded} {#if loaded}
<slot /> <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} {/if}
<Toaster richColors position="top-center" /> <Toaster richColors position="top-center" />