From 889a89a0ad7c4bd9b6ddb2f6c56c69691542c9cc Mon Sep 17 00:00:00 2001
From: afn <47723802+afnzmn@users.noreply.github.com>
Date: Mon, 24 Oct 2022 16:55:53 -0400
Subject: [PATCH] feat: better spinner

---
 src/lib/components/atoms/Spinner.svelte | 43 +++++++++++++------------
 src/routes/+layout.svelte               |  4 +--
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/atoms/Spinner.svelte b/src/lib/components/atoms/Spinner.svelte
index 31c5e89..4274a7a 100644
--- a/src/lib/components/atoms/Spinner.svelte
+++ b/src/lib/components/atoms/Spinner.svelte
@@ -1,23 +1,26 @@
-<div class="spin-container">
-	<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-</div>
+<script>
+  import { fade } from "svelte/transition";
+</script>
+<div class="spinner" transition:fade={{duration: 250}}/>
 
 <style>
-.spin-container {
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-  z-index: 1000;
-}
-.logo-image {
-  animation: rotate 2s linear infinite;
-  width: 75vmin;
-  height: 75vmin;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
+	@keyframes spinner {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.spinner:before {
+		content: '';
+		box-sizing: border-box;
+		position: fixed;
+		top: 48.25%;
+		left: 48.25%;
+		width: 50px;
+		height: 50px;
+		border-radius: 50%;
+		border: 4.5px solid transparent;
+		border-top-color: var(--accent-color);
+		animation: spinner 0.6s linear infinite;
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4716fb9..18d2623 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,8 +9,8 @@
   // Just like the set/clearInterval example found here: https://svelte.dev/docs#run-time-svelte-store-derived
   const show_loading_animation = derived(RouterEvents, ($event, set) => {
     if ($event.navigating) {
-      // Wait 300 ms before showing the animation.
-      const timeout = setTimeout(() => set(true), 300);
+      // Wait 250 ms before showing the animation.
+      const timeout = setTimeout(() => set(true), 250);
       return () => clearTimeout(timeout);
     } else {
       set(false)