Show spinner when joining room

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -50,8 +50,12 @@
 
   const joinRoom = async () => {
     if (hasNip29($relay)) {
+      joiningRoom = true
+
       const message = await getThunkError(nip29.joinRoom(url, room))
 
+      joiningRoom = false
+
       if (message && !message.includes("already")) {
         return pushToast({theme: "error", message})
       }
@@ -126,7 +130,8 @@
 
   const scrollToBottom = () => element?.scrollTo({top: 0, behavior: "smooth"})
 
-  let loading = $state(true)
+  let joiningRoom = $state(false)
+  let loadingEvents = $state(true)
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
@@ -202,7 +207,7 @@
       subscriptionFilters: [{kinds: [DELETE, REACTION, MESSAGE], "#h": [room], since: now()}],
       initialEvents: getEventsForUrl(url, [{...filter, limit: 20}]),
       onExhausted: () => {
-        loading = false
+        loadingEvents = false
       },
     }))
   })
@@ -238,8 +243,12 @@
               Leave Room
             </Button>
           {:else}
-            <Button class="btn btn-neutral btn-sm" onclick={joinRoom}>
-              <Icon icon="login-2" />
+            <Button class="btn btn-neutral btn-sm" disabled={joiningRoom} onclick={joinRoom}>
+              {#if joiningRoom}
+                <span class="loading loading-spinner loading-sm"></span>
+              {:else}
+                <Icon icon="login-2" />
+              {/if}
               Join Room
             </Button>
           {/if}
@@ -271,8 +280,8 @@
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
-      {#if loading}
-        <Spinner loading>Looking for messages...</Spinner>
+      {#if loadingEvents}
+        <Spinner loading={loadingEvents}>Looking for messages...</Spinner>
       {:else}
         <Spinner>End of message history</Spinner>
       {/if}