From d5ee8d9e1e05a82678d125f2e7d6aab240adaf07 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Wed, 28 Jul 2021 16:12:30 -0700
Subject: [PATCH] Using Svelte Tweened as a timeout.

---
 src/lib/toast/Toast.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/lib/toast/Toast.svelte b/src/lib/toast/Toast.svelte
index 69631ca..96baba4 100644
--- a/src/lib/toast/Toast.svelte
+++ b/src/lib/toast/Toast.svelte
@@ -1,10 +1,22 @@
 <script>
+	import { tweened } from 'svelte/motion';
 	import { fly, fade } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 	import Portal from '../Portal.svelte';
 	import { toast } from './toast';
+
+	let progress = tweened(0, { duration: 1000 });
+	async function updateProgress() {
+		const newProgress = Math.random() * 100;
+		await progress.set(newProgress);
+		toast.remove();
+	}
 </script>
 
+<h1>{$progress}</h1>
+<div style={`width: ${$progress}%; height: 10px; background: green;`} />
+<button on:click={updateProgress}>GO</button>
+
 <Portal>
 	<div class="toast-wrapper">
 		{#each $toast as message (message)}