Add loading bar

src/routes/_layout.svelte

@@ -1,5 +1,9 @@
 <script>
   import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+  import { derived } from 'svelte/store';
+  import { stores } from '@sapper/app';
+
   import Modal from 'svelte-simple-modal';
 
   import Tailwind from '../components/Tailwindcss.svelte';
@@ -14,12 +18,51 @@
 
   export let segment;
 
+  const { preloading } = stores();
+  const delayedPreloading = derived(preloading, (currentPreloading, set) => {
+    setTimeout(() => set(currentPreloading), 250);
+  });
+
   // check local storage save on load
   onMount(() => {
     checkLocalSave();
   });
 </script>
 
+<style>
+  .loading-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background-color: transparent;
+    overflow: hidden;
+    z-index: 100;
+  }
+
+  .loading-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20%;
+    height: 3px;
+    background-color: #4e7cff;
+    box-shadow: 10px 0 20px 20px #4e7cff, -10px 0 20px 20px #4e7cff;
+    animation: loading-bar 2s cubic-bezier(0.37, 0, 0.63, 1) infinite;
+  }
+
+  @keyframes loading-bar {
+    0% {
+      left: -25%;
+    }
+    100% {
+      left: 110%;
+    }
+  }
+</style>
+
 <svelte:head>
   <title>Paimon.moe</title>
 </svelte:head>
@@ -40,6 +83,9 @@
     </main>
   </DataSync>
 </Modal>
+{#if $preloading && $delayedPreloading}
+  <div transition:fade class="loading-bar" />
+{/if}
 <p class="lg:ml-64 px-4 md:px-8 py-4 text-gray-600">
   Paimon.moe is not affiliated with miHoYo.<br />
   Genshin Impact, game content and materials are trademarks and copyrights of miHoYo.