From 38dcfde8be9dc6b17ac1a2138cc62d059710dd6e Mon Sep 17 00:00:00 2001
From: Zersk <marcel.tschoepe@rz.uni-freiburg.de>
Date: Tue, 3 Dec 2024 00:51:18 +0100
Subject: [PATCH] Add spinner icon to indicate loading state

Integrated FontAwesome spinner icon into the loading component to enhance user experience by providing a clear visual cue during data loading. This change improves the UI feedback loop, making it more intuitive for users to understand that a background process is ongoing.
---
 archigator/src/app/main/main.component.html | 1 +
 archigator/src/app/main/main.component.ts   | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/archigator/src/app/main/main.component.html b/archigator/src/app/main/main.component.html
index 8fb9c3c..e4b058c 100644
--- a/archigator/src/app/main/main.component.html
+++ b/archigator/src/app/main/main.component.html
@@ -4,6 +4,7 @@
 
     <div *ngIf="loading" class="loading-spinner">
         <!-- Placeholder for your spinner; you can replace it with your spinner design -->
+        <fa-icon class="spinner" [size]="'2x'" [icon]="faSpinner" [spin]="true" *ngIf="loading"></fa-icon>
         <p>Loading...</p>
     </div>
 
diff --git a/archigator/src/app/main/main.component.ts b/archigator/src/app/main/main.component.ts
index 947db96..4d4ba1c 100644
--- a/archigator/src/app/main/main.component.ts
+++ b/archigator/src/app/main/main.component.ts
@@ -8,6 +8,7 @@ import {first} from "rxjs/operators";
 import {ApiQueueService} from "../services/apiqueue.service";
 import {ApiService} from "../services/api.service";
 import {Metadata} from "../shared/response";
+import {faSpinner} from "@fortawesome/free-solid-svg-icons";
 
 
 @Component({
@@ -221,5 +222,5 @@ export class MainComponent implements OnInit{
     }
 
 
-
+    protected readonly faSpinner = faSpinner;
 }