Get groups loading on login/page load

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>