From 5b24ffae2d402fbbff78f53727ca87f5cfe75618 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 5 Oct 2022 22:55:33 -0700
Subject: loading spinners

---
 src/routes/send/bitcoin/[address]/+page.svelte  |  4 +++-
 src/routes/send/lightning/[payreq]/+page.svelte | 18 ++++++++++++++----
 src/routes/send/user/[username]/+page.svelte    | 11 +++++++++--
 3 files changed, 26 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/routes/send/bitcoin/[address]/+page.svelte b/src/routes/send/bitcoin/[address]/+page.svelte
index 2de624ce..28bfeb54 100644
--- a/src/routes/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/send/bitcoin/[address]/+page.svelte
@@ -8,6 +8,8 @@
 	let { address } = $page.params;
 	let { currency } = data.user;
 	let amount, loading;
+	
+	let submit = () => (loading = true);
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -21,7 +23,7 @@
 	</div>
 	<Numpad bind:amount {currency} />
 
-	<form method="POST" use:enhance>
+  <form method="POST" use:enhance on:submit={submit}>
 		<input name="address" value={address} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
 		<div class="flex w-full">
diff --git a/src/routes/send/lightning/[payreq]/+page.svelte b/src/routes/send/lightning/[payreq]/+page.svelte
index b61a9264..1b248af6 100644
--- a/src/routes/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/send/lightning/[payreq]/+page.svelte
@@ -11,6 +11,9 @@
 
 	let { currency } = data.user;
 	let amount = form?.amount || data.amount;
+
+	let loading;
+	let submit = () => (loading = true);
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -21,15 +24,17 @@
 	{#if amount}
 		<div class="text-center mb-8">
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">Sending</h1>
-      <p class="text-6xl break-words mb-4">{s(amount)} <span class="text-xl md:text-2xl text-secondary">sats</span></p>
-      <h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
+			<p class="text-6xl break-words mb-4">
+				{s(amount)} <span class="text-xl md:text-2xl text-secondary">sats</span>
+			</p>
+			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
 			<p class="text-6xl break-words">{alias}</p>
 		</div>
 	{:else}
 		<Numpad bind:amount {currency} />
 	{/if}
 
-	<form method="POST" use:enhance>
+	<form method="POST" use:enhance on:submit={submit}>
 		<input name="payreq" value={payreq} type="hidden" />
 		<input name="amount" value={amount} type="hidden" />
 		<input name="confirmed" value={form?.confirm} type="hidden" />
@@ -38,8 +43,13 @@
 			<button
 				type="submit"
 				class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
+				disabled={loading}
 			>
-				Send
+				{#if loading}
+					<Spinner />
+				{:else}
+					Send
+				{/if}
 			</button>
 		</div>
 	</form>
diff --git a/src/routes/send/user/[username]/+page.svelte b/src/routes/send/user/[username]/+page.svelte
index f200827f..1193696b 100644
--- a/src/routes/send/user/[username]/+page.svelte
+++ b/src/routes/send/user/[username]/+page.svelte
@@ -26,6 +26,9 @@
 		if (amount) amount = undefined;
 		else back();
 	};
+
+	let loading;
+	let submit = () => (loading = true);
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={handleBack}>
@@ -50,7 +53,7 @@
 		<Numpad bind:amount={a} bind:amountFiat={af} {currency} bind:fiat />
 	{/if}
 
-	<form method="POST" use:enhance>
+  <form method="POST" use:enhance on:submit={submit}>
 		<input name="amount" value={amount} type="hidden" />
 		<input name="username" value={recipient.username} type="hidden" />
 		<input name="confirmed" value={form?.confirm} type="hidden" />
@@ -61,7 +64,11 @@
 					type="submit"
 					class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
 				>
-					Send
+					{#if loading}
+						<Spinner />
+					{:else}
+						Send
+					{/if}
 				</button>
 			{:else}
 				<button
-- 
cgit v1.2.3