diff options
| author | secondl1ght <[email protected]> | 2022-09-16 23:34:58 -0600 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-09-24 09:05:08 -0700 |
| commit | 01a1bb630e6e29b60a9f20671287913a3993e256 (patch) | |
| tree | f8f97d02e4d6a0bf748006cb94bfaabfdf5f41de /src/routes | |
| parent | 0ae9f1998e77c269cdefe82a1dcd013f3a82769e (diff) | |
| download | coinos-ui-01a1bb630e6e29b60a9f20671287913a3993e256.tar.gz coinos-ui-01a1bb630e6e29b60a9f20671287913a3993e256.zip | |
add loading state to invoice button, improve nav button states/styles
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/[username]/receive/+page.svelte | 32 | ||||
| -rw-r--r-- | src/routes/invoice/[id]/+page.svelte | 2 |
2 files changed, 30 insertions, 4 deletions
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> |