restyle the loading page

src/page/Load/Load.svelte

@@ -2,7 +2,19 @@
     import Blek from '../../shared/blek.svelte';
     import style from './style.module.scss';
 
-    import Plane from 'svelte-loading-spinners/Plane.svelte';
+    import Plane from 'svelte-loading-spinners/Jumper.svelte';
+
+    let motto_translate = true;
+    let motto_visible = true;
+    const flip_motto = () => {
+        motto_visible = false;
+        setTimeout(() => {
+            motto_visible = true;
+            motto_translate = !motto_translate;
+        }, 1000);
+        setTimeout(flip_motto, 10000);
+    }
+    flip_motto();
 </script>
 
 <div class={style.root}>
@@ -10,5 +22,12 @@
     <h1>
         Loading...
     </h1>
-    <Plane color='#e1e1e1' duration='1.5s' />
+    <Plane color='#e1e1e1' duration='3s' />
+    <p class={style.motto + (motto_visible ? '' : ' ' + style.hide)}>
+        {
+            !motto_translate ?
+            'Ad astra Augmenta' :
+            'To the stars we rise'
+        }
+    </p>
 </div>

src/page/Load/style.module.scss

@@ -1,12 +1,37 @@
+@use '../../lib/mixins.scss';
+
 .root {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
+
+    @include mixins.no_sel;
+    cursor: default;
+
+    :global {
+        .wrapper {
+            margin: 0 auto;
+        }
+    }
+
     h1 {
         font-size: 12pt;
         font-weight: 300;
-        height: 60px;
+        text-align: center;
+        margin: 20px 0;
+    }
+    .motto {
+        color: #8a8a8a;
+        margin-top: 30px;
+        font-weight: 600;
+        font-size: 9pt;
+        transition: 1s ease;
+        transform: translateY(0px);
+        &.hide {
+            opacity: 0;
+            transform: translateY(2px);
+        }
     }
 }