2025-summer/team-1
12
Fork 0
Code Issues Pull requests Projects Releases Activity

Add spinner

Browse source
This commit is contained in:
Leonardo Segala 2025-08-02 09:53:24 +02:00
parent 656d1e40c7
commit 2a8802a0b8
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/lib/components/SuggestionInput.svelte
View file

@ -1,11 +1,15 @@
<script lang="ts"> <script lang="ts">
let { roomId } = $props() import { LoaderCircle } from "@lucide/svelte"
let { roomId } = $props()
let input = $state("") let input = $state("")
let disabled: boolean = $state(false)
async function sendSong() { async function sendSong() {
disabled = true
await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" }) await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
input = "" input = ""
disabled = false
} }
</script> </script>
@ -20,7 +24,14 @@
sendSong() sendSong()
} }
}} }}
{disabled}
/> />
{#if disabled}
<span class="animate-spin">
<LoaderCircle />
</span>
{/if}
<button <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" 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 onclick={sendSong}>Add</button