From 2a8802a0b8386178380fa984b7976e2bee148b87 Mon Sep 17 00:00:00 2001
From: Leonardo Segala <leonardosegala2006@gmail.com>
Date: Sat, 2 Aug 2025 09:53:24 +0200
Subject: [PATCH] Add spinner

---
 frontend/src/lib/components/SuggestionInput.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/SuggestionInput.svelte b/frontend/src/lib/components/SuggestionInput.svelte
index 9659e0d..8bbd2ff 100644
--- a/frontend/src/lib/components/SuggestionInput.svelte
+++ b/frontend/src/lib/components/SuggestionInput.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-    let { roomId } = $props()
+    import { LoaderCircle } from "@lucide/svelte"
 
+    let { roomId } = $props()
     let input = $state("")
+    let disabled: boolean = $state(false)
 
     async function sendSong() {
+        disabled = true
         await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
         input = ""
+        disabled = false
     }
 </script>
 
@@ -20,7 +24,14 @@
                 sendSong()
             }
         }}
+        {disabled}
     />
+    {#if disabled}
+        <span class="animate-spin">
+            <LoaderCircle />
+        </span>
+    {/if}
+
     <button
         class="i-lucide-check h-[40px] w-1/4 cursor-pointer rounded border-2 border-lime-700 bg-lime-600 font-semibold text-white shadow-xl duration-100 hover:scale-105 active:scale-90"
         onclick={sendSong}>Add</button