From 29dabc24ac9febabfed2e27a07119695f291786e Mon Sep 17 00:00:00 2001
From: Nassim Tabchiche <n.tabchiche2@gmail.com>
Date: Thu, 26 Sep 2024 17:40:52 +0200
Subject: [PATCH] Add loading spinner while applied controls are being created

---
 .../[id=uuid]/edit/+page.svelte               | 21 +++++++++++++++++--
 .../[id=uuid]/+page.svelte                    | 13 +++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/(app)/(internal)/requirement-assessments/[id=uuid]/edit/+page.svelte b/frontend/src/routes/(app)/(internal)/requirement-assessments/[id=uuid]/edit/+page.svelte
index 1d8e453fc..acd0f88c9 100644
--- a/frontend/src/routes/(app)/(internal)/requirement-assessments/[id=uuid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/requirement-assessments/[id=uuid]/edit/+page.svelte
@@ -31,7 +31,8 @@
 		type ModalComponent,
 		type ModalSettings,
 		type ModalStore,
-		type ToastStore
+		type ToastStore,
+		ProgressRadial
 	} from '@skeletonlabs/skeleton';
 	import { superForm } from 'sveltekit-superforms';
 
@@ -127,7 +128,10 @@
 		}
 	}
 
+	$: createAppliedControlsLoading = false;
+
 	async function createAppliedControlsFromSuggestions() {
+		createAppliedControlsLoading = true;
 		const response = await fetch(
 			`/requirement-assessments/${data.requirementAssessment.id}/suggestions/applied-controls`,
 			{
@@ -137,6 +141,7 @@
 				}
 			}
 		);
+		createAppliedControlsLoading = false;
 		toastStore.trigger({
 			message: response.ok
 				? m.createAppliedControlsFromSuggestionsSuccess()
@@ -367,7 +372,19 @@
 												e.preventDefault();
 												createAppliedControlsFromSuggestions();
 											}}
-											><i class="fa-solid fa-fire-extinguisher mr-2" />
+										>
+											<span class="mr-2">
+												{#if createAppliedControlsLoading}
+													<ProgressRadial
+														class="-ml-2"
+														width="w-6"
+														meter="stroke-white"
+														stroke={80}
+													/>
+												{:else}
+													<i class="fa-solid fa-fire-extinguisher" />
+												{/if}
+											</span>
 											{m.createAppliedControlsFromSuggestions()}
 										</button>
 									{/if}
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
index cae5e9f99..ff719f9a8 100644
--- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
@@ -175,7 +175,10 @@
 		modalStore.trigger(modal);
 	}
 
+	$: createAppliedControlsLoading = false;
+
 	async function createAppliedControlsFromSuggestions() {
+		createAppliedControlsLoading = true;
 		const response = await fetch(
 			`/compliance-assessments/${data.compliance_assessment.id}/suggestions/applied-controls`,
 			{
@@ -185,6 +188,7 @@
 				}
 			}
 		);
+		createAppliedControlsLoading = false;
 		toastStore.trigger({
 			message: response.ok
 				? m.createAppliedControlsFromSuggestionsSuccess()
@@ -366,7 +370,14 @@
 				<button
 					class="btn text-gray-100 bg-gradient-to-l from-tertiary-400 to-orange-600 h-fit whitespace-normal"
 					on:click={(_) => createAppliedControlsFromSuggestions()}
-					><i class="fa-solid fa-fire-extinguisher mr-2" />
+				>
+					<span class="mr-2">
+						{#if createAppliedControlsLoading}
+							<ProgressRadial class="-ml-2" width="w-6" meter="stroke-white" stroke={80} />
+						{:else}
+							<i class="fa-solid fa-fire-extinguisher" />
+						{/if}
+					</span>
 					{m.createAppliedControlsFromSuggestions()}
 				</button>
 			{/if}