Get groups loading on login/page load

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">