From 01a1bb630e6e29b60a9f20671287913a3993e256 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Fri, 16 Sep 2022 23:34:58 -0600
Subject: add loading state to invoice button, improve nav button states/styles

---
 src/routes/[username]/receive/+page.svelte | 32 +++++++++++++++++++++++++++---
 src/routes/invoice/[id]/+page.svelte       |  2 +-
 2 files changed, 30 insertions(+), 4 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 699fa4bd..68cf0d83 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -9,6 +9,7 @@
 	let useFiat = true;
 	let amountFiat = 0;
 	let amountSats = 0;
+	let loading = false;
 
 	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / 100000000)) : amountSats);
 
@@ -73,6 +74,7 @@
 	};
 
 	let submit = async () => {
+		loading = true;
 		let id = await post('/invoice', {
 			amount,
 			rate: $selectedRate,
@@ -171,13 +173,37 @@
 				<div class="space-y-3 w-full md:w-[300px] mx-auto">
 					<button
 						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-						0
+							0 || loading
 							? 'opacity-50'
 							: 'opacity-100'}"
 						on:click={submit}
-						disabled={$invoiceAmount === 0}
-						><Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}</button
+						disabled={$invoiceAmount === 0 || loading}
 					>
+						{#if loading}
+							<svg
+								class="mx-auto h-6 w-6 animate-spin text-white"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<circle
+									class="opacity-25"
+									cx="12"
+									cy="12"
+									r="10"
+									stroke="currentColor"
+									stroke-width="4"
+								/>
+								<path
+									class="opacity-75"
+									fill="currentColor"
+									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+								/>
+							</svg>
+						{:else}
+							<Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}
+						{/if}
+					</button>
 				</div>
 			</div>
 		{:else}
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index a521f327..3f96bf06 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -261,7 +261,7 @@
 						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
 					>
 
-					<div class="border border-gray-200 rounded-2xl md:p-4">
+					<div class="border border-gray-200 rounded-2xl">
 						<Qr {text} {image} bind:qr />
 					</div>
 
-- 
cgit v1.2.3