shows splash screen during app boot

0LNetworkCommunity · May 23, 2024 · 9c1ae89 · 9c1ae89
1 parent aaaed2d
commit 9c1ae89
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/public/libra.png b/public/libra.png
diff --git a/src/App.svelte b/src/App.svelte
@@ -45,6 +45,8 @@
     import UpgradeApp from './components/about/UpgradeApp.svelte'
     import { tryUpdate } from './modules/updater'
     import { isLoading } from 'svelte-i18n'
+    import { isBooted } from './modules/boot'
+    import SplashScreen from './components/layout/SplashScreen.svelte'
 
   // black magic with I18n here
   // temporarily set up here otherwise... issues
@@ -117,6 +119,10 @@
   <Style />
   <UpgradeApp />
 
+  {#if !$isBooted}
+    <SplashScreen />
+  {/if}
+
   {#if $isInit}
     <SearchingFullnodes />
     <KeyError/>

diff --git a/src/components/layout/SplashScreen.svelte b/src/components/layout/SplashScreen.svelte
@@ -0,0 +1,36 @@
+<script>
+  export let loading = true;
+</script>
+
+<style>
+  .splash-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: #ffffff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+  }
+
+  .logo {
+    width: 150px;
+    height: 150px;
+  }
+
+  h1 {
+    margin-top: 20px;
+    font-size: 2rem; 
+  }
+</style>
+
+{#if loading}
+  <div class="splash-container">
+    <img src="/libra.png" alt="Libra Logo" class="logo" />
+    <h1 class="uk-text-muted">Carpe Libra</h1>
+  </div>
+{/if}