Add spinner
This commit is contained in:
parent
656d1e40c7
commit
2a8802a0b8
1 changed files with 12 additions and 1 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue