69 lines
1.5 KiB
Svelte
69 lines
1.5 KiB
Svelte
<script lang="ts">
|
||
import Loader from "$lib/components/atoms/loader.svelte";
|
||
import { onDestroy, onMount } from "svelte";
|
||
|
||
const initialMessages = [
|
||
"Just a moment...",
|
||
"Please wait...",
|
||
"Processing...",
|
||
"Working on it...",
|
||
"One moment please...",
|
||
];
|
||
|
||
const fiveSecondMessages = [
|
||
"Still processing...",
|
||
"Just a bit longer...",
|
||
"Almost there...",
|
||
"This may take a moment...",
|
||
"Thank you for waiting...",
|
||
];
|
||
|
||
const tenSecondMessages = [
|
||
"Thanks for your patience...",
|
||
"Still working on it...",
|
||
"We appreciate your patience...",
|
||
"Processing securely...",
|
||
"Just a little longer...",
|
||
];
|
||
|
||
const twentySecondMessages = [
|
||
"Thank you for waiting...",
|
||
"Still processing – thanks for being patient...",
|
||
"We're working on it...",
|
||
"Your patience is appreciated...",
|
||
"Almost done...",
|
||
];
|
||
|
||
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>
|