SpinnerTiny: Use svg instead of the css border trick to create the spinner fixing it looking more like a horseshoe than a circle on different browser scales (also added animation on the svg circle).

also: Fix color being wrong on dark theme.

svg fix inspired by mui :)

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 These changes are awaiting release:
 
+## Fixed
+
+- SpinnerTiny: Use svg instead of the css border trick to create the spinner fixing it looking more like a horseshoe than a circle on different browser scales (also added animation on the svg circle).
+- SpinnerTiny: Fix color being wrong on dark theme.
+
 ## Maintenance
 
 - workflows/test-pr-server: Add test step

src/lib/SpinnerTiny.svelte

@@ -1,23 +1,32 @@
-<script lang="ts">
-	interface Props {
-		style?: string;
-	}
-
-	let { style = "" }: Props = $props();
-</script>
-
-<div class="loader" {style}></div>
+<span class="loader">
+	<svg viewBox="0 0 50 50">
+		<circle
+			cx="25"
+			cy="25"
+			r="20"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="6"
+			stroke-linecap="round"
+		/>
+	</svg>
+</span>
 
 <style lang="scss">
 	.loader {
+		$animDur: 1.4s;
+		display: flex;
 		width: 16px;
-		height: 12px;
-		border: 2px solid $text-color;
-		border-bottom-color: transparent;
-		border-radius: 50%;
-		display: inline-block;
-		box-sizing: border-box;
-		animation: rotation 1s linear infinite;
+		height: 16px;
+		animation: rotation $animDur linear infinite;
+
+		svg {
+			circle {
+				stroke-dasharray: 80px 200px;
+				stroke-dashoffset: 0px;
+				animation: circle-size $animDur ease-in-out infinite;
+			}
+		}
 	}
 
 	@keyframes rotation {
@@ -28,4 +37,19 @@
 			transform: rotate(360deg);
 		}
 	}
+
+	@keyframes circle-size {
+		0% {
+			stroke-dasharray: 1px 200px;
+			stroke-dashoffset: 0px;
+		}
+		50% {
+			stroke-dasharray: 100px 200px;
+			stroke-dashoffset: -15px;
+		}
+		100% {
+			stroke-dasharray: 1px 200px;
+			stroke-dashoffset: -125px;
+		}
+	}
 </style>

src/routes/(app)/import/process/+page.svelte

@@ -615,7 +615,7 @@
 									<td class="icon-cell">
 										<div>
 											{#if !l.state}
-												<SpinnerTiny style="width: 13px;" />
+												<SpinnerTiny />
 											{:else if l.state === ImportResponseType.IMPORT_SUCCESS}
 												<Icon i="check" wh={22} />
 											{:else if l.state === ImportResponseType.IMPORT_NOTFOUND}