From 11ecf03d8af147005f6e1384e66143d0994f99a8 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 10 Jul 2025 16:43:40 -0700
Subject: [PATCH] replace spinner with more reliable SVG implementation

---
 src/lib/Button.svelte  |  3 +-
 src/lib/Spinner.svelte | 79 +++++++++++++++++++++---------------------
 2 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
index 67267ca..28e316b 100644
--- a/src/lib/Button.svelte
+++ b/src/lib/Button.svelte
@@ -102,8 +102,7 @@
 	{/if}
 
 	{#if loading}
-		<div class="w-[1rem]"></div>
-		<div class="absolute top-1/2 right-4 translate-y-[-40%]"><Spinner size="1.3rem" /></div>
+		<Spinner class="-mr-1 ml-0.5" size="1.3rem" />
 	{/if}
 </button>
 
diff --git a/src/lib/Spinner.svelte b/src/lib/Spinner.svelte
index 6a0cc09..cfbce85 100644
--- a/src/lib/Spinner.svelte
+++ b/src/lib/Spinner.svelte
@@ -2,58 +2,57 @@
 	import type { ClassValue } from 'svelte/elements';
 
 	interface Props {
-		size: string;
+		size?: string;
 		class?: ClassValue;
-		color?: string;
 	}
 
-	let { size, class: classValue, color = '#fff' }: Props = $props();
+	let { size = '2em', class: classValue }: Props = $props();
+	const radius = 18;
 </script>
 
-<div class={['lds-ring border-white', classValue]} style="--size: {size};--color: {color}">
-	<div></div>
-	<div></div>
-	<div></div>
-	<div></div>
-</div>
+<svg
+	class={['sui-spinner stroke-white', classValue]}
+	width={size}
+	height={size}
+	viewBox="0 0 40 40"
+>
+	<circle cx="20" cy="20" r={radius} fill="none" stroke-width="4" stroke-linecap="round">
+		<animate
+			attributeName="stroke-dasharray"
+			values="22,90; 38,74; 22,90"
+			keyTimes="0;0.75;1"
+			dur="2s"
+			repeatCount="indefinite"
+		/>
+		<animate
+			attributeName="stroke-dashoffset"
+			values="0;-56.5;-113"
+			keyTimes="0;0.75;1"
+			dur="2s"
+			repeatCount="indefinite"
+		/>
+	</circle>
+</svg>
 
 <style>
-	.lds-ring {
+	.sui-spinner {
 		display: inline-block;
-		position: relative;
-		width: var(--size);
-		height: var(--size);
+		vertical-align: middle;
+		animation: spinner-rotate 2s cubic-bezier(0.55, 0.15, 0.35, 1) infinite;
 	}
-
-	.lds-ring div {
-		box-sizing: border-box;
-		display: block;
-		position: absolute;
-		width: calc(var(--size) * 0.8);
-		height: calc(var(--size) * 0.8);
-		margin: max(calc(var(--size) * 0.1), 2px);
-		border: max(calc(var(--size) * 0.1), 2px) solid #fff;
-		border-radius: 50%;
-		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-		border-color: #fff transparent transparent transparent;
-	}
-
-	.lds-ring div:nth-child(1) {
-		animation-delay: -0.45s;
-	}
-
-	.lds-ring div:nth-child(2) {
-		animation-delay: -0.3s;
-	}
-
-	.lds-ring div:nth-child(3) {
-		animation-delay: -0.15s;
-	}
-
-	@keyframes lds-ring {
+	@keyframes spinner-rotate {
 		0% {
 			transform: rotate(0deg);
 		}
+		/* 15% {
+			transform: rotate(60deg);
+		} */
+		50% {
+			transform: rotate(180deg);
+		}
+		/* 80% {
+			transform: rotate(300deg);
+		} */
 		100% {
 			transform: rotate(360deg);
 		}