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