Add debounce to email input

frontend/src/lib/util.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export const debounce = (callback: Function, wait = 300) => {
+	let timeout: ReturnType<typeof setTimeout>;
+
+	return (...args: unknown[]) => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => callback(...args), wait);
+	};
+};

frontend/src/routes/+page.svelte

@@ -4,12 +4,17 @@
 	import { username } from '$lib/stores/mailbox';
 	import { ofetch } from 'ofetch';
 	import { goto } from '$app/navigation';
+	import { debounce } from '$lib/util';
 
 	const emailDomain = import.meta.env.VITE_EMAIL_DOMAIN as string;
 
 	function refreshPage() {
 		goto(window.location.href);
 	}
+
+	function setUsername(event: KeyboardEvent) {
+		username.set((event.target as HTMLInputElement).value);
+	}
 </script>
 
 <svelte:head>
@@ -30,7 +35,7 @@
 			<p class="text-xl font-semibold">You are...</p>
 			<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
 				<div class="input-group-shim"><MailIcon size="1.4rem" /></div>
-				<input type="text" placeholder="shark" bind:value={$username} />
+				<input type="text" placeholder="shark" on:keyup={debounce(setUsername)} />
 				<div class="input-group-shim">@{emailDomain}</div>
 			</div>
 		</div>