replace spinner with more reliable SVG implementation

src/lib/Button.svelte

@@ -102,8 +102,7 @@
 	{/if}
 
 	{#if loading}
-		<div class="w-[1rem]"></div>
+		<Spinner class="-mr-1 ml-0.5" size="1.3rem" />
-		<div class="absolute top-1/2 right-4 translate-y-[-40%]"><Spinner size="1.3rem" /></div>
 	{/if}
 </button>
 

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}">
+<svg
-	<div></div>
+	class={['sui-spinner stroke-white', classValue]}
-	<div></div>
+	width={size}
-	<div></div>
+	height={size}
-	<div></div>
+	viewBox="0 0 40 40"
-</div>
+>
+	<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;
+		vertical-align: middle;
-		width: var(--size);
+		animation: spinner-rotate 2s cubic-bezier(0.55, 0.15, 0.35, 1) infinite;
-		height: var(--size);
 	}
-
+	@keyframes spinner-rotate {
-	.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 {
 		0% {
 			transform: rotate(0deg);
 		}
+		/* 15% {
+			transform: rotate(60deg);
+		} */
+		50% {
+			transform: rotate(180deg);
+		}
+		/* 80% {
+			transform: rotate(300deg);
+		} */
 		100% {
 			transform: rotate(360deg);
 		}