Get groups loading on login/page load

src/app/components/LogIn.svelte

@@ -4,12 +4,13 @@
   import Icon from '@lib/components/Icon.svelte'
   import Field from '@lib/components/Field.svelte'
   import Button from '@lib/components/Button.svelte'
+  import Spinner from '@lib/components/Spinner.svelte'
   import CardButton from '@lib/components/CardButton.svelte'
   import InfoNostr from '@app/components/LogIn.svelte'
   import {pushModal, clearModal} from '@app/modal'
   import {pushToast} from '@app/toast'
   import {addSession} from '@app/base'
-  import {loadProfile, loadFollows, loadMutes, loadHandle} from '@app/state'
+  import {loadUserData, loadHandle} from '@app/state'
 
   const back = () => history.back()
 
@@ -27,9 +28,7 @@
     const {pubkey, relays = []} = handle
     const broker = Nip46Broker.get(pubkey, secret, handler)
     const [profile, success] = await Promise.all([
-      loadProfile(pubkey, relays),
-      loadFollows(pubkey, relays),
-      loadMutes(pubkey, relays),
+      loadUserData(pubkey, relays),
       broker.connect(),
     ])
 
@@ -86,8 +85,7 @@
   </Field>
   <div class="flex flex-col gap-2">
     <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
-      Log In
+      <Spinner {loading}>Log In</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
     <div class="text-sm">

src/app/components/PrimaryNav.svelte

@@ -7,19 +7,39 @@
 
 <script lang="ts">
   import {goto} from '$app/navigation'
+  import {derived} from 'svelte/store'
+  import {identity} from '@welshman/lib'
   import Icon from "@lib/components/Icon.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from '@app/components/SpaceAdd.svelte'
   import {session} from "@app/base"
-  import {deriveGroupMembership, makeGroupId, getGroup, deriveProfile} from "@app/state"
+  import {deriveGroupMembership, makeGroupId, getGroup, deriveProfile, qualifiedGroupsById, getGroupNom} from "@app/state"
   import {pushModal} from "@app/modal"
 
-  export const addSpace = () => pushModal(SpaceAdd)
+  const addSpace = () => pushModal(SpaceAdd)
+
+  const browseSpaces = () => goto("/browse")
 
-  export const browseSpaces = () => goto("/browse")
 
   $: profile = deriveProfile($session?.pubkey)
   $: membership = deriveGroupMembership($session?.pubkey)
+  $: userGroupsByNom = derived([membership, qualifiedGroupsById], ([$membership, $qualifiedGroupsById]) => {
+    const $userGroupsByNom = new Map()
+
+    for (const id of $membership?.ids || []) {
+      const nom = getGroupNom(id)
+      const group = $qualifiedGroupsById.get(id)
+      const groups = $userGroupsByNom.get(nom) || []
+
+      if (group) {
+        groups.push(group)
+      }
+
+      $userGroupsByNom.set(nom, groups)
+    }
+
+    return $userGroupsByNom
+  })
 </script>
 
 <div class="relative w-14 bg-base-100">
@@ -35,16 +55,13 @@
           {/if}
         </div>
       </PrimaryNavItem>
-      {#each Array.from($membership?.ids || []) as groupId (groupId)}
-        {#await getGroup(groupId)}
-          <!-- pass -->
-        {:then group}
-          <PrimaryNavItem title={group?.name}>
-            <div class="w-10 rounded-full border border-solid border-base-300">
-              <img alt={group?.name} src={group?.picture} />
-            </div>
-          </PrimaryNavItem>
-        {/await}
+      {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
+        {@const qualifiedGroup = qualifiedGroups[0]}
+        <PrimaryNavItem title={qualifiedGroup?.group.name}>
+          <div class="w-10 rounded-full border border-solid border-base-300">
+            <img alt={qualifiedGroup?.group.name} src={qualifiedGroup?.group.picture} />
+          </div>
+        </PrimaryNavItem>
       {/each}
       <PrimaryNavItem title="Add Space" on:click={addSpace}>
         <div class="!flex w-10 items-center justify-center">

src/app/components/SpaceJoin.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
   import {goto} from '$app/navigation'
+  import {append, uniqBy} from '@welshman/lib'
+  import {GROUPS} from '@welshman/util'
   import CardButton from '@lib/components/CardButton.svelte'
+  import Spinner from '@lib/components/Spinner.svelte'
   import Button from "@lib/components/Button.svelte"
   import Field from '@lib/components/Field.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
   import {pushModal} from '@app/modal'
   import {pushToast} from '@app/toast'
-  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup} from '@app/state'
+  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup, updateList} from '@app/state'
 
   const back = () => history.back()
 
@@ -28,11 +31,25 @@
     if (!info.supported_nips?.includes(29)) {
       return pushToast({
         theme: "error",
-        message: "Sorry, it looks like that relay doesn't support nostr groups."
+        message: "Sorry, it looks like that relay doesn't support nostr spaces."
       })
     }
 
-    const group = await loadGroup(id)
+    const group = await loadGroup(nom, [url])
+
+    if (!group) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we weren't able to find that space."
+      })
+    }
+
+    await updateList(GROUPS, (tags: string[][]) => uniqBy(t => t.join(''), append(["group", nom, url], tags)))
+
+    goto(`/spaces/${nom}`)
+    pushToast({
+      message: "Welcome to the space!"
+    })
   }
 
   const join = async () => {
@@ -74,8 +91,7 @@
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
-      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
-      Join Space
+      <Spinner {loading}>Join Space</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
   </div>