show loading screen

src/routes/+page.svelte

@@ -6,9 +6,9 @@
 
 	let files: FileList | null;
 	let url: string = '';
-	let urlInput: HTMLInputElement;
 	let fileForm: HTMLFormElement;
 	let hasFile = true;
+	let loading = false;
 
 	$: if (files && files.length >= 0) {
 		hasFile = true;
@@ -44,6 +44,7 @@
 
 	const summarize = async () => {
 		try {
+			loading = true;
 			let result;
 			if (hasFile) {
 				if (!files) throw new Error('File missing');
@@ -53,6 +54,7 @@
 				result = await submitUrl(url);
 			}
 			summary.set(JSON.stringify(result.response));
+			loading = false;
 			return goto('chat');
 		} catch (error) {
 			alert((error as App.Error).message);
@@ -63,6 +65,9 @@
 
 <div class="container h-full mx-auto flex justify-center items-center px-4">
 	<div class="text-center">
+		{#if loading}
+			<p>Please wait while Sumi tries to make sense of this garbage.</p>
+		{:else}
 			<h2>Please Sumi</h2>
 			<p class="my-4">Enter the URL you'd like to have summarized.</p>
 			<div>
@@ -70,7 +75,6 @@
 					class="input"
 					type="text"
 					bind:value={url}
-				bind:this={urlInput}
 					disabled={hasFile}
 					placeholder="https://stupid.article/you-will-never-believe-this-shit"
 				/>
@@ -101,5 +105,6 @@
 					on:click={summarize}>Summarize</button
 				>
 			</div>
+		{/if}
 	</div>
 </div>