Add loading spinner while applied controls are being created

intuitem · Sep 26, 2024 · 29dabc2 · 29dabc2
1 parent d662eea
commit 29dabc2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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
@@ -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}