fix zapper loading

src/app/components/ZapButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import type {TrustedEvent} from "@welshman/util"
-  import {session, deriveZapperForPubkey} from "@welshman/app"
+  import {session, loadZapperForPubkey} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import Zap from "@app/components/Zap.svelte"
   import InfoZapperError from "@app/components/InfoZapperError.svelte"
@@ -18,19 +18,29 @@
 
   const {url, event, children, replaceState, ...props}: Props = $props()
 
-  const zapper = deriveZapperForPubkey(event.pubkey)
+  const zapperPromise = loadZapperForPubkey(event.pubkey)
 
-  const onClick = () => {
+  const onClick = async () => {
-    if (!$zapper?.allowsNostr) {
+    loading = true
-      pushModal(InfoZapperError, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
+
-    } else if ($session?.wallet) {
+    try {
-      pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
+      const zapper = await zapperPromise
-    } else {
+
-      pushModal(WalletConnect, {}, {replaceState})
+      if (!zapper?.allowsNostr) {
+        pushModal(InfoZapperError, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
+      } else if ($session?.wallet) {
+        pushModal(Zap, {url, pubkey: event.pubkey, eventId: event.id}, {replaceState})
+      } else {
+        pushModal(WalletConnect, {}, {replaceState})
+      }
+    } finally {
+      loading = false
     }
   }
+
+  let loading = $state(false)
 </script>
 
-<Button onclick={onClick} {...props}>
+<Button onclick={onClick} disabled={loading} {...props}>
   {@render children?.()}
 </Button>