From 1b72cbf5fdfc420ecae7835f3e14c6b67648a3c6 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 18 Mar 2023 14:36:15 +0100
Subject: [PATCH] add loading spinner

---
 src/lib/components/icons/spinner.svelte | 45 +++++++++++++++++++++++++
 src/routes/+layout.svelte               | 10 +++++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/icons/spinner.svelte

diff --git a/src/lib/components/icons/spinner.svelte b/src/lib/components/icons/spinner.svelte
new file mode 100644
index 0000000..f250bfc
--- /dev/null
+++ b/src/lib/components/icons/spinner.svelte
@@ -0,0 +1,45 @@
+<svg class="spinner" width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+</svg>
+
+<style>
+    .spinner {
+        --offset: 187;
+        --duration: 1.4s;
+        animation: rotator var(--duration) linear infinite;
+    }
+
+    @keyframes rotator {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(270deg); }
+    }
+
+    .path {
+        stroke-dasharray: var(--offset);
+        stroke-dashoffset: 0;
+        transform-origin: center;
+        animation:
+            dash var(--duration) ease-in-out infinite, 
+            colors calc(var(--duration)*4) ease-in-out infinite;
+    }
+
+    @keyframes colors {
+        0% { stroke: #4285F4; }
+        25% { stroke: #DE3E35; }
+        50% { stroke: #F7C223; }
+        75% { stroke: #1B9A59; }
+        100% { stroke: #4285F4; }
+    }
+
+    @keyframes dash {
+        0% { stroke-dashoffset: var(--offset); }
+        50% {
+            stroke-dashoffset: calc(var(--offset)/4);
+            transform:rotate(135deg);
+        }
+        100% {
+            stroke-dashoffset: var(--offset);
+            transform:rotate(450deg);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 987eeb5..b740c3c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,9 @@
     import { browser, dev } from "$app/environment";
     import * as Sentry from '@sentry/browser';
     import { apm } from "$lib/apm";
-    import { page } from "$app/stores";
+    import { navigating, page } from "$app/stores";
+    import Spinner from "$lib/components/icons/spinner.svelte";
+    import { fly } from "svelte/transition";
 
     if (browser && dev) import("virtual:windi-devtools");
     
@@ -25,6 +27,12 @@
 
 <Navbar />
 
+{#if $navigating}
+    <div transition:fly={{ duration: 200, opacity: 0, y: -20 }} class="fixed bg-hex-1f1f1f top-20 left-1/2 transform -translate-x-1/2 rounded-full w-14 h-14 p-2 z-99">
+        <Spinner />
+    </div>
+{/if}
+
 <div class="overflow-x-hidden w-100vw">
     <PageTransition url={data.url}>
         <slot />