diff --git a/src/app/components/VoiceRoomItem.svelte b/src/app/components/VoiceRoomItem.svelte
index 7974e612..5df903d5 100644
--- a/src/app/components/VoiceRoomItem.svelte
+++ b/src/app/components/VoiceRoomItem.svelte
@@ -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}