From ae98c19e5be8001b88dbee4c8198c142d35e292e Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Thu, 4 Jul 2024 16:19:07 -0700
Subject: [PATCH] CSS animation instead.

---
 src/lib/Loading.svelte | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/lib/Loading.svelte b/src/lib/Loading.svelte
index 8961639..538a7ed 100644
--- a/src/lib/Loading.svelte
+++ b/src/lib/Loading.svelte
@@ -4,22 +4,10 @@
 
 	export let inline = true;
 	export let text: string = 'Loading...';
-
-	let count = 1;
-	const Increments = 5;
-
-	onMount(() => {
-		const timer = setInterval(() => {
-			count = (count + 1) % Increments;
-		}, 50);
-		return () => {
-			clearInterval(timer);
-		};
-	});
 </script>
 
 <div class:inline>
-	{text} <span class="dots" style:transform="rotate({360 * (count / Increments)}deg)">{Logo}</span>
+	{text} <span class="dots">{Logo}</span>
 </div>
 
 <style>
@@ -41,5 +29,15 @@
 		display: inline-block;
 		text-align: center;
 		transform-origin: center;
+		animation: spin 1s infinite linear;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
 	}
 </style>