From 4d274ae91992feae91369e5dd2b728ee34f59c59 Mon Sep 17 00:00:00 2001
From: Zersk <marcel.tschoepe@rz.uni-freiburg.de>
Date: Tue, 3 Dec 2024 00:50:11 +0100
Subject: [PATCH] Add loading and error state logic to metadata handling

This update introduces a loading spinner and error state to improve user experience when fetching metadata. The logic ensures the app indicates loading status and displays an error message when metadata fails to load. Adjustments to the HTML reflect these changes with conditional displays based on the loading and error states.
---
 archigator/src/app/main/main.component.html | 11 ++++++++---
 archigator/src/app/main/main.component.ts   |  9 ++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/archigator/src/app/main/main.component.html b/archigator/src/app/main/main.component.html
index a3bc678..8fb9c3c 100644
--- a/archigator/src/app/main/main.component.html
+++ b/archigator/src/app/main/main.component.html
@@ -1,8 +1,13 @@
 <!--<app-header></app-header>-->
 
-<div class="checkout-wrapper" *ngIf="hasMetadata; else noMetadata">
+<div class="checkout-wrapper">
 
-    <div class="checkout-main">
+    <div *ngIf="loading" class="loading-spinner">
+        <!-- Placeholder for your spinner; you can replace it with your spinner design -->
+        <p>Loading...</p>
+    </div>
+
+    <div class="checkout-main" *ngIf="!loading && hasMetadata; else noMetadata">
 
         <div class="checkout-container">
 
@@ -35,7 +40,7 @@
 </div>
 
 <ng-template #noMetadata>
-    <div class="center-message">
+    <div *ngIf="error" class="center-message">
         Could not load metadata
     </div>
 </ng-template>
diff --git a/archigator/src/app/main/main.component.ts b/archigator/src/app/main/main.component.ts
index 8345c0c..947db96 100644
--- a/archigator/src/app/main/main.component.ts
+++ b/archigator/src/app/main/main.component.ts
@@ -20,6 +20,8 @@ import {Metadata} from "../shared/response";
 export class MainComponent implements OnInit{
 
     hasMetadata: boolean = false;
+    loading: boolean = true;
+    error: boolean = false;
 
     constructor(private oauthService: OAuthService,
                 private parameterService: ParametersService,
@@ -67,14 +69,19 @@ export class MainComponent implements OnInit{
     loadMetadata() {
         this.apiService.getMetadata().subscribe(
             (metadata: Metadata) => {
+                this.loading = false;
                 if (metadata) {
                     // Handle the logic here if metadata is not null or undefined
                     this.hasMetadata = true;
+                } else {
+                    this.error = true;
                 }
             },
             (error) => {
                 console.error('Failed to load metadata:', error);
-                this.hasMetadata = false;
+                // this.hasMetadata = false;
+                this.loading = false;
+                this.error = true;
             }
         );
     }