add loader for long loading pages

1 files changed, 23 insertions, 12 deletions

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 0366e6d..d343a17 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -1,7 +1,4 @@
 <script context="module" lang="ts">
-  import { type ComponentType, SvelteComponent} from "svelte";
-  var showmsg: boolean = false;
-
   export type Header = {
     addMessage (message: string, options?: Partial<MessageOptions>): void
   };
@@ -28,10 +25,11 @@
   import { setContext } from "svelte";
   import { fly } from "svelte/transition";
   import { readable, writable } from "svelte/store";
+  import { isNavigating } from "$lib/navigation.ts";
 
   const newestMessage = writable<HeaderMessage|null>(null);
 
-  const rose = chrome ? boowomp : logo;
+  const Rose = chrome ? boowomp : logo;
 
   const currentMessage = writable<HeaderMessage|null>(null, (set) => {
     let $currentMessage: HeaderMessage|null = null;
@@ -84,7 +82,11 @@
   <header>
     <div class="corner">
       <a href="/" class="name">
-	<img id="logo" src={rose} alt="rose"/>
+	{#if $isNavigating}
+	  <span class="loader"></span>
+	{:else}
+	  <img id="logo" src={Rose} alt="rose"/>
+	{/if}
 	<p>rose</p>
       </a>
     </div>
@@ -143,6 +145,22 @@
     padding-bottom: 6px;
   }
 
+  .loader {
+    width: 1.5em;
+    height: 1.5em;
+    border: 5px solid transparent;
+    border-bottom-color: #E2122D;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  @keyframes rotation {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
   .corner {
     height: 3em;
     margin-bottom: 0px;
@@ -173,13 +191,6 @@
       object-fit: contain;
     }
 
-    & img {
-      width: 1.5em;
-      height: 1.5em;
-      object-fit: contain;
-
-    }
-
   }
 
   .center {