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,43 +65,46 @@
 
 <div class="container h-full mx-auto flex justify-center items-center px-4">
 	<div class="text-center">
-		<h2>Please Sumi</h2>
+		{#if loading}
-		<p class="my-4">Enter the URL you'd like to have summarized.</p>
+			<p>Please wait while Sumi tries to make sense of this garbage.</p>
-		<div>
+		{:else}
-			<input
+			<h2>Please Sumi</h2>
-				class="input"
+			<p class="my-4">Enter the URL you'd like to have summarized.</p>
-				type="text"
+			<div>
-				bind:value={url}
+				<input
-				bind:this={urlInput}
+					class="input"
-				disabled={hasFile}
+					type="text"
-				placeholder="https://stupid.article/you-will-never-believe-this-shit"
+					bind:value={url}
-			/>
+					disabled={hasFile}
-		</div>
+					placeholder="https://stupid.article/you-will-never-believe-this-shit"
-		<p class="my-6">•</p>
+				/>
-		<div>
+			</div>
-			<p>Or you can submit a text file instead:</p>
+			<p class="my-6">•</p>
-			<form bind:this={fileForm}>
+			<div>
-				<div class="flex flex-row">
+				<p>Or you can submit a text file instead:</p>
-					<input class="input my-4" type="file" accept=".txt" name="conversation" bind:files />
+				<form bind:this={fileForm}>
-					{#if hasFile}
+					<div class="flex flex-row">
-						<button
+						<input class="input my-4" type="file" accept=".txt" name="conversation" bind:files />
-							type="button"
+						{#if hasFile}
-							class="btn btn-icon-sm variant-ghost-error self-center"
+							<button
-							style="height: 100%;"
+								type="button"
-							on:click={removeFile}
+								class="btn btn-icon-sm variant-ghost-error self-center"
-							><Fa icon={faTrashCan} />
+								style="height: 100%;"
-						</button>
+								on:click={removeFile}
-					{/if}
+								><Fa icon={faTrashCan} />
-				</div>
+							</button>
-			</form>
+						{/if}
-		</div>
+					</div>
-		<div class="flex justify-center space-x-2 my-12">
+				</form>
-			<button
+			</div>
-				type="button"
+			<div class="flex justify-center space-x-2 my-12">
-				class="btn variant-ringed-tertiary"
+				<button
-				disabled={!hasFile && url.length <= 0}
+					type="button"
-				on:click={summarize}>Summarize</button
+					class="btn variant-ringed-tertiary"
-			>
+					disabled={!hasFile && url.length <= 0}
-		</div>
+					on:click={summarize}>Summarize</button
+				>
+			</div>
+		{/if}
 	</div>
 </div>