From 3eb5ed62b6fd8b734962199b4f0714f3e8368545 Mon Sep 17 00:00:00 2001
From: Dawid Urbas <dawid@getbold.agency>
Date: Fri, 19 Jul 2024 10:34:35 +0200
Subject: [PATCH] Add loading state when sign up

---
 .../webapp-extension/create-key/+page.svelte  | 106 +++++++++---------
 1 file changed, 55 insertions(+), 51 deletions(-)

diff --git a/holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte b/holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte
index b24613c..c602072 100644
--- a/holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte
+++ b/holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AppParagraph, Button, Input } from '$components';
+	import { AppParagraph, Button, Input, Loading } from '$components';
 	import { dismissWindow, isValidEmail } from '$helpers';
 	import { extractDetailsFromUrl } from '$helpers';
 	import { appQueries } from '$queries';
@@ -27,56 +27,60 @@
 	};
 </script>
 
-<div class="flex flex-col items-center justify-center">
-	<img src="/img/holo_logo.svg" alt="Holo Logo" />
-	<h1 class="mt-4 text-2xl font-bold">Sign up</h1>
-	<AppParagraph
-		extraProps="my-4 max-w-48 text-center"
-		text="This app is requesting the following details"
-	/>
-</div>
+{#if $applicationKeyMutation.isPending}
+	<Loading />
+{:else}
+	<div class="flex flex-col items-center justify-center">
+		<img src="/img/holo_logo.svg" alt="Holo Logo" />
+		<h1 class="mt-4 text-2xl font-bold">Sign up</h1>
+		<AppParagraph
+			extraProps="my-4 max-w-48 text-center"
+			text="This app is requesting the following details"
+		/>
+	</div>
 
-{#if $extractDetailsFromUrl.requireEmail}
-	<Input label="Email:" bind:value={email} extraProps="mb-4" error={errors.email} />
-{/if}
-{#if $extractDetailsFromUrl.requireRegistrationCode}
-	<Input
-		label="Registration code:"
-		bind:value={registrationCode}
-		extraProps="mb-4"
-		error={errors.registrationCode}
-	/>
-{/if}
-<Input label="Name this key:" bind:value={keyName} extraProps="mb-4" error={errors.keyName} />
+	{#if $extractDetailsFromUrl.requireEmail}
+		<Input label="Email:" bind:value={email} extraProps="mb-4" error={errors.email} />
+	{/if}
+	{#if $extractDetailsFromUrl.requireRegistrationCode}
+		<Input
+			label="Registration code:"
+			bind:value={registrationCode}
+			extraProps="mb-4"
+			error={errors.registrationCode}
+		/>
+	{/if}
+	<Input label="Name this key:" bind:value={keyName} extraProps="mb-4" error={errors.keyName} />
 
-{#if $applicationKeyMutation.error}
-	<div class="mutation-error">
-		<p>Error: {$applicationKeyMutation.error.message}</p>
-	</div>
-{/if}
+	{#if $applicationKeyMutation.error}
+		<div class="mutation-error">
+			<p>Error: {$applicationKeyMutation.error.message}</p>
+		</div>
+	{/if}
 
-<Button
-	label="Create keys"
-	onClick={() => {
-		if (validateAllFields()) {
-			$applicationKeyMutation.mutate(
-				{
-					app_key_name: keyName,
-					happId: $extractDetailsFromUrl.happId,
-					happName: $extractDetailsFromUrl.happName,
-					happLogo: $extractDetailsFromUrl.happLogo,
-					happUiUrl: $extractDetailsFromUrl.happUiUrl,
-					messageId: $extractDetailsFromUrl.messageId,
-					origin: $extractDetailsFromUrl.origin,
-					email,
-					registrationCode,
-					currentAppsList: $applicationsListQuery.data || []
-				},
-				{
-					onSuccess: dismissWindow
-				}
-			);
-		}
-	}}
-	extraBottomMargin
-/>
+	<Button
+		label="Create keys"
+		onClick={() => {
+			if (validateAllFields()) {
+				$applicationKeyMutation.mutate(
+					{
+						app_key_name: keyName,
+						happId: $extractDetailsFromUrl.happId,
+						happName: $extractDetailsFromUrl.happName,
+						happLogo: $extractDetailsFromUrl.happLogo,
+						happUiUrl: $extractDetailsFromUrl.happUiUrl,
+						messageId: $extractDetailsFromUrl.messageId,
+						origin: $extractDetailsFromUrl.origin,
+						email,
+						registrationCode,
+						currentAppsList: $applicationsListQuery.data || []
+					},
+					{
+						onSuccess: dismissWindow
+					}
+				);
+			}
+		}}
+		extraBottomMargin
+	/>
+{/if}