Keep the leave-space spinner up until the navigation home lands

src/app/access.ts

@@ -22,7 +22,7 @@ import {PLATFORM_URL} from "@app/env"
 import {relaysMostlyRestricted} from "@app/policies"
 import {Push} from "@app/push"
 import {deriveSocket} from "@app/relays"
-import {notificationSettings, setSpaceNotifications} from "@app/settings"
+import {notificationSettings, removeTrustedRelay, setSpaceNotifications} from "@app/settings"
 import {syncApplicationData} from "@app/sync"
 
 export const ROOM_CREATE_INVITE = 9009
@@ -149,6 +149,12 @@ export const leaveRoom = async (url: string, h: string) => {
   await roomLists.get().removeRoom(h, url).then(publish)
 }
 
+export const leaveSpace = async (url: string) => {
+  await roomLists.get().removeRelay(url).then(publish)
+  await publishLeaveRequest(url)
+  await removeTrustedRelay(url)
+}
+
 export const publishRoomInvite = async (url: string, h: string) => {
   const code = randomId()
   const event = makeEvent(ROOM_CREATE_INVITE, {

src/app/components/SpaceAuthError.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import {parse, renderAsHtml} from "@welshman/content"
-  import {publish} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
@@ -15,10 +14,8 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
-  import {publishLeaveRequest} from "@app/access"
+  import {leaveSpace} from "@app/access"
-  import {roomLists} from "@app/core"
   import {clearModals, navigate, pushModal} from "@app/modal"
-  import {removeTrustedRelay} from "@app/settings"
 
   type Props = {
     url: string
@@ -31,18 +28,15 @@
 
   const requestAccess = () => pushModal(SpaceAccessRequest, {url, callback: clearModals})
 
-  const leaveSpace = async () => {
+  const leave = async () => {
     loading = true
 
     try {
-      await $roomLists.removeRelay(url).then(publish)
+      await leaveSpace(url)
-      await publishLeaveRequest(url)
+      await navigate("/home")
-      await removeTrustedRelay(url)
     } finally {
       loading = false
     }
-
-    navigate("/home")
   }
 
   let loading = $state(false)
@@ -69,8 +63,7 @@
       Go Home
     </Button>
     <div class="flex gap-2">
-      <Button class="button button-error" onclick={leaveSpace} disabled={loading}
+      <Button class="button button-error" onclick={leave} disabled={loading}>Leave Space</Button>
-        >Leave Space</Button>
       <Button type="submit" class="button button-primary" disabled={loading}>
         Request Access
         <Icon icon={AltArrowRight} />

src/app/components/SpaceExit.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {navigate} from "@app/modal"
   import {displayRelayUrl} from "@welshman/util"
-  import {publish} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -12,9 +11,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {publishLeaveRequest} from "@app/access"
+  import {leaveSpace} from "@app/access"
-  import {roomLists} from "@app/core"
-  import {removeTrustedRelay} from "@app/settings"
 
   const {url} = $props()
 
@@ -24,14 +21,11 @@
     loading = true
 
     try {
-      await $roomLists.removeRelay(url).then(publish)
+      await leaveSpace(url)
-      await publishLeaveRequest(url)
+      await navigate("/home")
-      await removeTrustedRelay(url)
     } finally {
       loading = false
     }
-
-    navigate("/home")
   }
 
   let loading = $state(false)