From 4fe42ca6632a1bf4a8e6dbe5741e16be566ef8dc Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 28 Aug 2023 07:42:02 +0200
Subject: [PATCH] Animation for Cookie Saving

---
 src/routes/Settings.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index 4429c87..9426cd4 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
 	import Modal from "$lib/components/Modal.svelte";
+	import { fade } from "svelte/transition";
 
   export let showSettings: boolean;
 
   let showAuthSaved = false;
+  let showFiller = true;
 
   const saveAuth = () => {
     showAuthSaved = true;
+    showFiller = false;
+    setTimeout(function() {
+      showAuthSaved = false;
+      setTimeout(function() {
+        showFiller = true;
+      }, 200);
+    }, 2000);
     document.cookie = "authToken=" + authToken;
   }
 
@@ -41,10 +50,11 @@
       <label for="authTokenInput">Auth Token:</label>
       <input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
       {#if showAuthSaved}
-        <p>Saved!</p>
+        <div in:fade={{duration: 200}} out:fade={{duration: 200}}>Saved!</div>
+      {:else if showFiller}
+        <br>
+        <br>
       {/if}
-      <br>
-      <br>
       <b>Show Game Groups:</b><br>
       <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
       <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>