add loading splash, start adding toast messages, qr code skeleton

5 files changed, 45 insertions, 11 deletions

diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
new file mode 100644
index 00000000..2ab4c739
--- /dev/null
+++ b/src/components/LoadingSplash.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center">
+	<Icon icon="logo" style="mt-[calc(50vh-72px)]" />
+</div>
diff --git a/src/components/index.js b/src/components/index.js
index febf8dac..e41c3d4c 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -7,3 +7,4 @@ export { default as Icon } from './Icon.svelte';
 export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
+export { default as LoadingSplash } from './LoadingSplash.svelte';
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6562db18..f91772e8 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
@@ -10,4 +11,5 @@
 	onMount(connect);
 </script>
 
+<SvelteToast />
 <slot />
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>
diff --git a/src/routes/receive.svelte b/src/routes/receive.svelte
index 760733a3..3ccd45e8 100644
--- a/src/routes/receive.svelte
+++ b/src/routes/receive.svelte
@@ -1,12 +1,20 @@
 <script>
 	// in the future we will want to allow users to set their fiat currency in the settings
-	import { AppHeader, Icon } from '$comp';
+	import { onMount } from 'svelte';
+	import { AppHeader, Icon, LoadingSplash } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
 
-	if (!$user && typeof window !== 'undefined') {
-		window.location = '/login';
-	}
+	onMount(async () => {
+		if (browser) {
+			let { default: toast } = await import('@zerodevx/svelte-toast');
+
+			if (!$user && typeof window !== 'undefined') {
+				window.location = '/login';
+				toast.push('Please login to continue.');
+			}
+		}
+	});
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -179,4 +187,6 @@
 			/>
 		{/if}
 	</div>
+{:else}
+	<LoadingSplash />
 {/if}