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

@@ -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>
 

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;
 }