loading state

client/src/routes/note/[id]/[password].svelte

@@ -7,14 +7,13 @@
 </script>
 
 <script lang="ts">
+	import { onMount } from 'svelte'
+	import copy from 'copy-to-clipboard'
+
 	import type { NotePublic } from '$lib/api'
 	import { info, get } from '$lib/api'
 	import { decrypt, getKeyFromString } from '$lib/crypto'
 	import Button from '$lib/ui/Button.svelte'
-	import TextInput from '$lib/ui/TextInput.svelte'
-	import copy from 'copy-to-clipboard'
-
-	import { onMount } from 'svelte'
 
 	export let id: string
 	export let password: string
@@ -41,12 +40,15 @@
 	async function show() {
 		try {
 			error = false
+			loading = true
 			const data = note || (await get(id)) // Don't get the content twice on wrong password.
 			const key = await getKeyFromString(password)
 			data.contents = await decrypt(data.contents, key)
 			note = data
 		} catch {
 			error = true
+		} finally {
+			loading = false
 		}
 	}
 </script>
@@ -63,18 +65,23 @@
 		<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
 	{:else}
 		<form on:submit|preventDefault={show}>
-			<p>click below to show and delete the note if the counter has reached it's limit</p>
-			<Button type="submit">show note</Button>
-			{#if error}
-				<br />
-				<p class="error-text">
-					wrong password. could not decipher. probably a broken link. note was destroyed.
+			<fieldset>
+				<p>click below to show and delete the note if the counter has reached it's limit</p>
+				<Button type="submit">show note</Button>
+				{#if error}
 					<br />
-				</p>
-			{/if}
+					<p class="error-text">
+						wrong password. could not decipher. probably a broken link. note was destroyed.
+						<br />
+					</p>
+				{/if}
+			</fieldset>
 		</form>
 	{/if}
 {/if}
+{#if loading}
+	<p>loading...</p>
+{/if}
 
 <style>
 	.note {