Use joinAbortController as isJoining

src/app/components/VoiceRoomItem.svelte

@@ -25,27 +25,24 @@
 
   const participants = deriveVoiceParticipants(url, h)
   const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
-  let isJoining = $state(false)
+  let joinAbortController = $state<AbortController | undefined>(undefined)
-  let joinAbortController: AbortController | undefined
 
   const handleClick = async () => {
     if (isActive) {
       await leaveVoiceRoom()
       return
     }
-    if (isJoining) {
+    if (joinAbortController) {
-      joinAbortController?.abort()
+      joinAbortController.abort()
       return
     }
     joinAbortController = new AbortController()
-    isJoining = true
     try {
       await joinVoiceRoom(url, h, joinAbortController.signal)
     } catch (e) {
       console.error("Failed to join voice room", e)
       pushToast({theme: "error", message: "Failed to join voice room"})
     } finally {
-      isJoining = false
       joinAbortController = undefined
     }
   }
@@ -62,7 +59,7 @@
   class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
   <div class="flex w-full min-w-0 flex-col gap-2">
     <div class="flex gap-2 items-center">
-      {#if isJoining}
+      {#if joinAbortController}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
         <Icon icon={isActive ? VolumeLoud : Volume} size={4} class="opacity-70" />