fixed progress bar

src/lib/components/layout/toast.svelte

@@ -8,25 +8,12 @@
 
 	let { toast }: Props = $props();
 
-	// animates the close dialogue
-	let progress = $state(100);
-	const intervalTime = 20; // 20ms
-	const totalTime = 4000; // 4 seconds
-	const decrement = 100 / (totalTime / intervalTime);
-
-	var interval = setInterval(() => {
-		progress -= decrement;
-		if (progress <= 0) {
-			clearInterval(interval);
-		}
-	}, intervalTime);
-
 	async function delayedClose(id: string) {
 		await new Promise((resolve) => setTimeout(resolve, 4000));
-		removeAlert(id)
+		removeAlert(id);
 	}
 	delayedClose(toast.id);
-	
+
 	function removeAlert(id: string) {
 		appSettings.toastAlerts.delete(id);
 	}
@@ -36,7 +23,7 @@
 	<div>{toast.message}</div>
 	<div>
 		<button aria-label="close notification" class="mask mask-circle hover:bg-base-300" onclick={() => removeAlert(toast.id)}>
-			<div class="radial-progress" style="--value:{progress}; --size:2rem; --thickness: 2px;" role="progressbar">
+			<div class="radial-progress animate-value" style="--value:var(--_value); --size:2rem; --thickness: 2px;" role="progressbar">
 				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 				</svg>
@@ -44,3 +31,26 @@
 		</button>
 	</div>
 </div>
+
+<style>
+	/* used to animate the timeout */
+	@property --_value {
+		syntax: '<number>';
+		inherits: true;
+		initial-value: 0;
+	}
+	.animate-value {
+		animation-name: grow;
+		animation-duration: 4s;
+		animation-direction: reverse;
+	}
+
+	@keyframes grow {
+		from {
+			--_value: 0;
+		}
+		to {
+			--_value: 100;
+		}
+	}
+</style>

src/lib/components/settings/server-settings.svelte.ts

@@ -2,9 +2,10 @@ import { toastAlert } from "../common/classes.svelte";
 import { appSettings } from "../common/state.svelte";
 
 export function testAPIConnectivity() {
+    let id = crypto.randomUUID() 
     let toastObject = new toastAlert({
-        message: 'success!',
-        id: crypto.randomUUID()
+        message: id,
+        id: id
     });
     appSettings.toastAlerts.set(toastObject.id, toastObject);
 }