diff --git a/src/app/components/ZapButton.svelte b/src/app/components/ZapButton.svelte
index 7f2ece4..64ac9e2 100644
--- a/src/app/components/ZapButton.svelte
+++ b/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 = () => {
-    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})
+  const onClick = async () => {
+    loading = true
+
+    try {
+      const zapper = await zapperPromise
+
+      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>