From 926b1cd61d5bca6e6e9fd3420681d0829341a1e0 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 30 Jul 2022 12:59:47 -0600
Subject: add loading splash, start adding toast messages, qr code skeleton

---
 src/routes/invoice/[amount].svelte | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

(limited to 'src/routes/invoice')

diff --git a/src/routes/invoice/[amount].svelte b/src/routes/invoice/[amount].svelte
index d1dea907..27140519 100644
--- a/src/routes/invoice/[amount].svelte
+++ b/src/routes/invoice/[amount].svelte
@@ -1,17 +1,13 @@
 <script>
 	import { browser } from '$app/env';
 	import { rate, user, invoiceAmount, invoiceAmountFiat } from '$lib/store';
-	import { Icon } from '$comp';
+	import { Icon, LoadingSplash } from '$comp';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
 	export let text;
 	export let amount;
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
-
 	let tipPercent = 0;
 	const setRate = ($invoiceAmountFiat / $invoiceAmount) * 100000000;
 
@@ -69,6 +65,13 @@
 	onMount(async () => {
 		if (browser) {
 			let { default: QRCodeStyling } = await import('qr-code-styling');
+			let { default: toast } = await import('@zerodevx/svelte-toast');
+
+			if (!$user && typeof window !== 'undefined') {
+				toast.push('Please login to continue.');
+				window.location = '/login';
+			}
+
 			const qrCode = new QRCodeStyling({
 				width: window.screen.width < 640 ? 250 : 300,
 				type: 'svg',
@@ -104,6 +107,9 @@
 	};
 
 	let customInput;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 1000);
 </script>
 
 {#if $user}
@@ -226,8 +232,14 @@
 							id="qr"
 							class="border {showMobileTip
 								? 'border-gray-400'
-								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center"
-						/>
+								: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center h-[300px] w-[250px] md:w-[300px] relative"
+						>
+							<div
+								class="z-100 h-[300px] w-[250px] md:w-[300px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+									? 'block'
+									: 'hidden'}"
+							/>
+						</div>
 
 						<div class="px-5 space-y-3">
 							<div class="flex justify-between">
@@ -273,6 +285,8 @@
 			</div>
 		</div>
 	</div>
+{:else}
+	<LoadingSplash />
 {/if}
 
 <style>
-- 
cgit v1.2.3