merge

frontend/src/lib/components/SuggestionInput.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    let { roomId } = $props()
+    import { LoaderCircle } from "@lucide/svelte"
 
+    let { roomId } = $props()
     let input = $state("")
-    let disabled = $state(false)
+    let disabled: boolean = $state(false)
 
     async function sendSong() {
         disabled = true
@@ -23,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