diff --git a/src/app/components/LogIn.svelte b/src/app/components/LogIn.svelte
index c40cf60..6ba6fd6 100644
--- a/src/app/components/LogIn.svelte
+++ b/src/app/components/LogIn.svelte
@@ -18,18 +18,6 @@
 
   const signUp = () => pushModal(SignUp)
 
-  const withLoading =
-    (s: string, cb: (...args: any[]) => any) =>
-    async (...args: any[]) => {
-      loading = s
-
-      try {
-        await cb(...args)
-      } finally {
-        loading = undefined
-      }
-    }
-
   const onSuccess = async (session: Session, relays: string[] = []) => {
     await loadUserData(session.pubkey, {relays})
 
@@ -39,32 +27,44 @@
     clearModals()
   }
 
-  const loginWithNip07 = withLoading("nip07", async () => {
-    const pubkey = await getNip07()?.getPublicKey()
+  const loginWithNip07 = async () => {
+    loading = 'nip07'
 
-    if (pubkey) {
-      await onSuccess({method: "nip07", pubkey})
-    } else {
-      pushToast({
-        theme: "error",
-        message: "Something went wrong! Please try again.",
-      })
+    try {
+      const pubkey = await getNip07()?.getPublicKey()
+
+      if (pubkey) {
+        await onSuccess({method: "nip07", pubkey})
+      } else {
+        pushToast({
+          theme: "error",
+          message: "Something went wrong! Please try again.",
+        })
+      }
+    } finally {
+      loading = undefined
     }
-  })
+  }
 
-  const loginWithNip55 = withLoading("nip55", async (app: any) => {
-    const signer = new Nip55Signer(app.packageName)
-    const pubkey = await signer.getPubkey()
+  const loginWithNip55 = async (app: any) => {
+    loading = 'nip55'
 
-    if (pubkey) {
-      await onSuccess({method: "nip55", pubkey, signer: app.packageName})
-    } else {
-      pushToast({
-        theme: "error",
-        message: "Something went wrong! Please try again.",
-      })
+    try {
+      const signer = new Nip55Signer(app.packageName)
+      const pubkey = await signer.getPubkey()
+
+      if (pubkey) {
+        await onSuccess({method: "nip55", pubkey, signer: app.packageName})
+      } else {
+        pushToast({
+          theme: "error",
+          message: "Something went wrong! Please try again.",
+        })
+      }
+    } finally {
+      loading = undefined
     }
-  })
+  }
 
   const loginWithPassword = () => pushModal(LogInPassword)
 
@@ -92,7 +92,7 @@
   {#if getNip07()}
     <Button disabled={loading} on:click={loginWithNip07} class="btn btn-primary">
       {#if loading === "nip07"}
-        <span class="loading loading-spinner mr-3" />
+        <span class="loading loading-spinner mr-3"></span>
       {:else}
         <Icon icon="widget" />
       {/if}
@@ -102,7 +102,7 @@
   {#each signers as app}
     <Button disabled={loading} class="btn btn-primary" on:click={() => loginWithNip55(app)}>
       {#if loading === "nip55"}
-        <span class="loading loading-spinner mr-3" />
+        <span class="loading loading-spinner mr-3"></span>
       {:else}
         <img src={app.iconUrl} alt={app.name} width="20" height="20" />
       {/if}
@@ -112,7 +112,7 @@
   {#if BURROW_URL && !hasSigner}
     <Button disabled={loading} on:click={loginWithPassword} class="btn btn-primary">
       {#if loading === "password"}
-        <span class="loading loading-spinner mr-3" />
+        <span class="loading loading-spinner mr-3"></span>
       {:else}
         <Icon icon="key" />
       {/if}
@@ -129,7 +129,7 @@
   {#if BURROW_URL && hasSigner}
     <Button disabled={loading} on:click={loginWithPassword} class="btn">
       {#if loading === "password"}
-        <span class="loading loading-spinner mr-3" />
+        <span class="loading loading-spinner mr-3"></span>
       {:else}
         <Icon icon="key" />
       {/if}
diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte
index 6cda88e..1013941 100644
--- a/src/app/components/ThunkStatus.svelte
+++ b/src/app/components/ThunkStatus.svelte
@@ -50,10 +50,12 @@
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
-      <span class="flex cursor-pointer items-center gap-1 text-error">
-        <Icon icon="danger" size={3} />
-        <span>Failed to send!</span>
-      </span>
+      {#snippet children()}
+        <span class="flex cursor-pointer items-center gap-1 text-error">
+          <Icon icon="danger" size={3} />
+          <span>Failed to send!</span>
+        </span>
+      {/snippet}
     </Tippy>
   </div>
 {:else if canCancel || isPending}
diff --git a/src/app/editor/index.ts b/src/app/editor/index.ts
index fd787e9..5c35c9a 100644
--- a/src/app/editor/index.ts
+++ b/src/app/editor/index.ts
@@ -84,7 +84,7 @@ export const makeEditor = ({
                     editor: (this as any).editor,
                     search: derived(profileSearch, s => s.searchValues),
                     getRelays: (pubkey: string) => ctx.app.router.FromPubkeys([pubkey]).getUrls(),
-                    component: ProfileSuggestion as unknown as Component,
+                    component: ProfileSuggestion,
                   }),
                 ]
               },
diff --git a/src/app/modal.ts b/src/app/modal.ts
index 04a417c..0175586 100644
--- a/src/app/modal.ts
+++ b/src/app/modal.ts
@@ -22,7 +22,7 @@ export const emitter = new Emitter()
 export const modals = writable<Record<string, Modal>>({})
 
 export const pushModal = (
-  component: Component,
+  component: Component<any>,
   props: Record<string, any> = {},
   options: ModalOptions = {},
 ) => {
@@ -37,7 +37,7 @@ export const pushModal = (
 }
 
 export const pushDrawer = (
-  component: Component,
+  component: Component<any>,
   props: Record<string, any> = {},
   options: ModalOptions = {},
 ) => pushModal(component, props, {...options, drawer: true})
diff --git a/src/lib/components/SearchSelect.svelte b/src/lib/components/SearchSelect.svelte
index 4c0c41d..96a845d 100644
--- a/src/lib/components/SearchSelect.svelte
+++ b/src/lib/components/SearchSelect.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type {SvelteComponent} from "svelte"
   import {readable} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {identity} from "@welshman/lib"
@@ -14,7 +13,7 @@
 
   let input: Element
   let popover: Instance
-  let instance: SvelteComponent
+  let instance: any
 
   const search = readable(
     createSearch(options, {
diff --git a/src/lib/components/Tippy.svelte b/src/lib/components/Tippy.svelte
index 005764e..f58e7a6 100644
--- a/src/lib/components/Tippy.svelte
+++ b/src/lib/components/Tippy.svelte
@@ -1,20 +1,15 @@
 <script lang="ts">
   import "tippy.js/animations/shift-away.css"
 
-  import {onMount} from "svelte"
-  import type {Component, ComponentProps} from "svelte"
-  import tippy, {type Instance, type Props} from "tippy.js"
+  import tippy from "tippy.js"
+  import {onMount, mount, unmount} from "svelte"
 
-  export let component: Component
-  export let props: ComponentProps<any> = {}
-  export let params: Partial<Props> = {}
-  export let popover: Instance | undefined = undefined
-  export let instance: Component | undefined = undefined
+  let {component, children = undefined, props = {}, params = {}, popover = $bindable(), instance = $bindable(), ...restProps} = $props()
+
+  let reactiveProps = $derived(props)
 
   let element: Element
 
-  $: instance?.$set(props)
-
   onMount(() => {
     if (element) {
       const target = document.createElement("div")
@@ -26,16 +21,16 @@
         ...params,
       })
 
-      instance = new component({target, props})
+      instance = mount(component, {target, props: reactiveProps})
 
       return () => {
         popover?.destroy()
-        instance?.$destroy()
+        unmount(instance)
       }
     }
   })
 </script>
 
-<div bind:this={element} class={$$props.class}>
-  <slot />
+<div bind:this={element} class={restProps.class}>
+  {@render children?.()}
 </div>
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index 60150ac..fa9017e 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -134,19 +134,17 @@
 
     if (events) {
       for (const event of $events.toReversed()) {
-        const {id, pubkey, created_at} = event
-
-        if (seen.has(id)) {
+        if (seen.has(event.id)) {
           continue
         }
 
-        const date = formatTimestampAsDate(created_at)
+        const date = formatTimestampAsDate(event.created_at)
 
         if (
           !newMessagesSeen &&
           event.pubkey !== $pubkey &&
           lastChecked &&
-          created_at > lastChecked
+          event.created_at > lastChecked
         ) {
           elements.push({type: "new-messages", id: "new-messages"})
           newMessagesSeen = true
@@ -157,15 +155,15 @@
         }
 
         elements.push({
-          id,
+          id: event.id,
           type: "note",
           value: event,
-          showPubkey: date !== previousDate || previousPubkey !== pubkey,
+          showPubkey: date !== previousDate || previousPubkey !== event.pubkey,
         })
 
         previousDate = date
-        previousPubkey = pubkey
-        seen.add(id)
+        previousPubkey = event.pubkey
+        seen.add(event.id)
       }
     }
 
@@ -230,9 +228,9 @@
           bind:this={newMessages}
           class="flex items-center py-2 text-xs transition-colors"
           class:opacity-0={showFixedNewMessages}>
-          <div class="h-px flex-grow bg-primary" />
+          <div class="h-px flex-grow bg-primary"></div>
           <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
-          <div class="h-px flex-grow bg-primary" />
+          <div class="h-px flex-grow bg-primary"></div>
         </div>
       {:else if type === "date"}
         <Divider>{value}</Divider>