Show the home hosting section whether or not the user hosts a space

e2e/USER_STORIES.md

@@ -1570,6 +1570,8 @@ Acceptance:
 - Selecting a conversation opens it, and it stays in the inbox once read.
 - Relay health checks are listed alongside the inbox, with the recommendation
   each one applies.
+- Hosting is offered whether or not she hosts a space: a shortcut to the hosting
+  panel when she has one, an invitation to start one when she doesn't.
 
 ### US-106 — Share text into the app
 

e2e/specs/notifications.spec.ts

@@ -381,6 +381,9 @@ test("US-116 read the home dashboard", async ({seed, as}) => {
   // Relay health checks had no mount point at all before the dashboard
   await expect(page.getByText("Health checks")).toBeVisible()
 
+  // Hosting shows even though alice hosts nothing, as an invitation to start a space
+  await expect(page.getByRole("button", {name: "Start a space"})).toBeVisible()
+
   await page.getByRole("button", {name: "Mark all read"}).click()
 
   await expect(unreadDot(conversation)).toHaveCount(0)

src/app/components/HomeHosting.svelte

@@ -5,6 +5,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import HomeSection from "@app/components/HomeSection.svelte"
   import RelayListItem from "@app/components/hosting/RelayListItem.svelte"
   import RelayCreate from "@app/components/hosting/RelayCreate.svelte"
@@ -13,31 +14,36 @@
   import {HostingError, listTenantRelays, type HostedRelay} from "@app/hosting"
 
   let relays = $state<HostedRelay[]>([])
-  let loaded = $state(false)
+  let loading = $state(true)
 
   const openCreate = () => pushModal(RelayCreate)
 
   // A pubkey with no tenant yet answers with a HostingError, which is the ordinary case for
-  // anyone who has never hosted a space. The panel stays out of the way rather than reporting it.
+  // anyone who has never hosted a space.
   onMount(async () => {
     try {
       relays = await listTenantRelays($user.pubkey)
-      loaded = true
     } catch (e) {
       if (!(e instanceof HostingError)) {
         console.error(e)
       }
+    } finally {
+      loading = false
     }
   })
 </script>
 
-{#if loaded}
-  <HomeSection title="Hosting" icon={Server}>
-    {#snippet action()}
-      {#if relays.length > 0}
-        <Link href="/settings/hosting" class="button button-neutral button-xs">Manage</Link>
-      {/if}
-    {/snippet}
+<HomeSection title="Hosting" icon={Server}>
+  {#snippet action()}
+    {#if relays.length > 0}
+      <Link href="/settings/hosting" class="button button-neutral button-xs">Manage</Link>
+    {/if}
+  {/snippet}
+  {#if loading}
+    <div class="flex justify-center px-4 pb-8">
+      <Spinner>Checking your hosted spaces…</Spinner>
+    </div>
+  {:else}
     {#if relays.length > 0}
       <div class="flex flex-col divide-y divide-line border-y border-line">
         {#each relays as relay (relay.id)}
@@ -59,5 +65,5 @@
         {relays.length > 0 ? "Add another space" : "Start a space"}
       </Button>
     </div>
-  </HomeSection>
-{/if}
+  {/if}
+</HomeSection>