Add loading indicator while joining

This commit is contained in:
mplorentz
2026-03-03 08:44:23 -05:00
parent ba5e9eef6a
commit 35b2952bff
+14 -2
View File
@@ -17,13 +17,18 @@
const participants = deriveVoiceParticipants(url, h)
const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
let isJoining = $state(false)
const handleClick = async () => {
if (isJoining) return
isJoining = true
try {
await joinVoiceRoom(url, h)
} catch (e) {
const message = e instanceof Error ? e.message : String(e)
pushToast({theme: "error", message: `Failed to join voice room: ${message}`})
} finally {
isJoining = false
}
}
@@ -35,8 +40,15 @@
</script>
<div>
<SecondaryNavItem onclick={handleClick} class={isActive ? "!bg-base-100 !text-base-content" : ""}>
<Icon icon={Volume} size={4} class="opacity-70" />
<SecondaryNavItem
onclick={handleClick}
disabled={isJoining}
class={isActive ? "!bg-base-100 !text-base-content" : ""}>
{#if isJoining}
<span class="loading loading-spinner loading-sm"></span>
{:else}
<Icon icon={Volume} size={4} class="opacity-70" />
{/if}
<RoomName {url} {h} />
</SecondaryNavItem>
{#if $participants.length > 0}