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.
nfdi4plants · Dec 2, 2024 · 4d274ae · 4d274ae
1 parent 80cfe58
commit 4d274ae
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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;
             }
         );
     }