From b6c6b705c15ff02e26eb5463a8b1550fa131ee38 Mon Sep 17 00:00:00 2001
From: axtloss <axtlos@disroot.org>
Date: Tue, 20 Aug 2024 23:22:50 +0200
Subject: add loader for long loading pages

---
 src/app.html                     |  1 -
 src/lib/navigation.ts            | 13 +++++++++++++
 src/routes/+layout.js            |  1 +
 src/routes/+page.svelte          |  1 -
 src/routes/+page.ts              |  2 --
 src/routes/Header.svelte         | 35 +++++++++++++++++++++++------------
 src/routes/projects/+page.svelte |  2 +-
 src/routes/projects/+page.ts     |  8 --------
 8 files changed, 38 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/navigation.ts
 create mode 100644 src/routes/+layout.js

(limited to 'src')
diff --git a/src/app.html b/src/app.html
index 5862a66..adf8bd8 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.gif" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
new file mode 100644
index 0000000..c759d97
--- /dev/null
+++ b/src/lib/navigation.ts
@@ -0,0 +1,13 @@
+import { derived } from 'svelte/store';
+import { navigating } from '$app/stores';
+
+let timer: ReturnType<typeof setTimeout> = null;
+export const isNavigating = derived(navigating, (newValue, set) => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  if (newValue) {
+    timer = setTimeout(() => set(true), 500);
+  }
+  set(false);
+});
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 0000000..b40fb51
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1 @@
+export const ssr = true
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f7fddd5..e6b76c0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,7 +7,6 @@
   import { isMobile } from "$lib/mobile";
   import { browser } from "$app/environment";
 
-
   const header = getContext<Header>("Header");
 
   var description = [
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index a72419a..189f71e 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,3 +1 @@
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
 export const prerender = true;
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 {
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index dbe5516..05c013f 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -16,7 +16,7 @@
 
   <ProjectEntry name={'BVG - Basic Vector Graphics'} description={'Custom made vector graphic format for use with FsVerify, the parser (fbwarn) is written in C using raylib'}
 		projType={'Personal Project'} link={'https://github.com/axtloss/fsverify/tree/main/fbwarn'}>
-    <img  src="/bvg.png" alt="The FsVerify logo drawn with BVG"/>
+    <img src='/bvg.png' alt="The FsVerify logo drawn with BVG"/>
   </ProjectEntry>
 
   <ProjectEntry name={'vib'} description={'Building docker images using yaml recipes, written in golang'}
diff --git a/src/routes/projects/+page.ts b/src/routes/projects/+page.ts
index e739ef4..189f71e 100644
--- a/src/routes/projects/+page.ts
+++ b/src/routes/projects/+page.ts
@@ -1,9 +1 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
 export const prerender = true;
-- 
cgit v1.2.3

