✅ admin side for now | 🔄 started FE

apps/frontend/src/lib/domains/checkout/payment-verification-loader.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Loader from "$lib/components/atoms/loader.svelte";
+	import { onDestroy, onMount } from "svelte";
+
+	const initialMessages = [
+		"Processing your payment securely...",
+		"Getting everything ready for you...",
+		"Setting up your transaction...",
+		"Starting the payment process...",
+		"Initiating secure payment...",
+	];
+
+	const fiveSecondMessages = [
+		"Almost there! Just finalizing your payment details...",
+		"Just a few more moments while we confirm everything...",
+		"We're processing your payment with care...",
+		"Double-checking all the details...",
+		"Making sure everything is in order...",
+	];
+
+	const tenSecondMessages = [
+		"Thank you for your patience. We're making sure everything is perfect...",
+		"Still working on it – thanks for being patient...",
+		"We're double-checking everything to ensure a smooth transaction...",
+		"Nearly there! Just completing the final security checks...",
+		"Your patience is appreciated while we process this securely...",
+	];
+
+	const twentySecondMessages = [
+		"Still working on it! Your transaction security is our top priority...",
+		"We appreciate your continued patience while we secure your transaction...",
+		"Taking extra care to process your payment safely...",
+		"Still working diligently to complete your transaction...",
+		"Thank you for waiting – we're ensuring everything is processed correctly...",
+	];
+
+	const getRandomMessage = (messages: string[]) => {
+		return messages[Math.floor(Math.random() * messages.length)];
+	};
+
+	let _defaultTxt = getRandomMessage(initialMessages);
+	let txt = $state(_defaultTxt);
+
+	onMount(() => {
+		setTimeout(() => {
+			txt = getRandomMessage(fiveSecondMessages);
+		}, 5000);
+
+		setTimeout(() => {
+			txt = getRandomMessage(tenSecondMessages);
+		}, 10000);
+
+		setTimeout(() => {
+			txt = getRandomMessage(twentySecondMessages);
+		}, 20000);
+	});
+
+	onDestroy(() => {
+		txt = _defaultTxt;
+	});
+</script>
+
+<div
+	class="flex h-full w-full flex-col place-items-center p-4 py-20 md:p-8 md:py-32"
+>
+	<Loader />
+	<p class="animate-pulse py-20 text-center">{txt}</p>
+</div>