From e46bb1f58fd61ed34a16259f02f8e1cae0866542 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lud=C4=9Bk=20Nov=C3=BD?=
 <13610612+ludeknovy@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:24:17 +0200
Subject: [PATCH] Add loading indicators and error handling for async data

Implemented `isLoading` states and error handling in the dashboard and scenario components to improve user feedback during asynchronous data fetching. Updated HTML templates to reflect loading states and revised some formatting for consistency.
---
 src/app/dashboard/dashboard.component.html |  2 +-
 src/app/dashboard/dashboard.component.ts   | 24 +++++++++++++++-------
 src/app/scenario/scenario.component.html   |  2 +-
 src/app/scenario/scenario.component.ts     | 13 +++++++++++-
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 64bdc1ca..6cfec026 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -80,7 +80,7 @@ <h6 class="card-header bg-transparent">Recent Test Runs</h6>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr *ngIf="!latestItems || latestItems.length === 0">
+                    <tr *ngIf="!isLoading && latestItems.length === 0">
                       <td colspan="5" class="text-muted no-data">Nothing here yet! Upload some test reports. <span><a href="https://jtlreporter.site/docs/guides/manual-data-upload">Show me how!</a></span></td>
                     </tr>
                     <tr *ngFor="let _ of latestItems" (click)="open(_.projectName, _.name, _.id)">
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 6752e9ef..85539715 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -4,21 +4,24 @@ import { ItemsListing, ProjectsOverallStats } from "../items.service.model";
 import { Router } from "@angular/router";
 import { SharedMainBarService } from "../shared-main-bar.service";
 import { getValidationResults } from "../utils/showZeroErrorTolerance";
+import { catchError } from "rxjs/operators";
+import { of } from "rxjs";
 
 @Component({
-  selector: "app-dashboard",
-  templateUrl: "./dashboard.component.html",
-  styleUrls: ["./dashboard.component.css", "../shared-styles.css"]
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css', '../shared-styles.css']
 })
 export class DashboardComponent implements OnInit {
   latestItems: ItemsListing[];
   overallStats: ProjectsOverallStats;
   Math: Math;
+  isLoading = true;
 
   constructor(
     private projectService: ProjectApiService,
     private router: Router,
-    private sharedMainBarService: SharedMainBarService
+    private sharedMainBarService: SharedMainBarService,
   ) {
     this.Math = Math;
   }
@@ -31,8 +34,13 @@ export class DashboardComponent implements OnInit {
 
   fetchLatestItems() {
     this.projectService.fetchLatestItems()
+      .pipe(catchError(r => {
+        this.isLoading = false;
+        return of(r);
+      }))
       .subscribe(_ => {
         this.latestItems = _;
+        this.isLoading = false;
       });
   }
 
@@ -45,12 +53,14 @@ export class DashboardComponent implements OnInit {
   }
 
   displayItemValidationError(zeroErrorEnabled, errorCount, errorRate, duration, minTestDuration) {
-    const { zeroErrorToleranceValidation, minTestDurationValidation } = getValidationResults(zeroErrorEnabled, errorRate, errorCount, duration, minTestDuration);
-    return zeroErrorToleranceValidation || minTestDurationValidation
+    const {
+      zeroErrorToleranceValidation,
+      minTestDurationValidation
+    } = getValidationResults(zeroErrorEnabled, errorRate, errorCount, duration, minTestDuration);
+    return zeroErrorToleranceValidation || minTestDurationValidation;
   }
 
 
-
   isValidationEnabled(zeroErrorEnabled, minTestDuration): boolean {
     return zeroErrorEnabled || minTestDuration > 0;
   }
diff --git a/src/app/scenario/scenario.component.html b/src/app/scenario/scenario.component.html
index 13e1ddf0..28eea52f 100644
--- a/src/app/scenario/scenario.component.html
+++ b/src/app/scenario/scenario.component.html
@@ -74,7 +74,7 @@ <h6 class="card-header bg-transparent">Test Runs
                         </th>
                       </tr>
                     </thead>
-                    <tbody *ngIf="items.data.length === 0">
+                    <tbody *ngIf="!isLoading && items.data.length === 0">
                       <tr>
                         <td colspan="8" class="text-muted text-center">Nothing here yet! Please upload some test reports.</td>
                       </tr>
diff --git a/src/app/scenario/scenario.component.ts b/src/app/scenario/scenario.component.ts
index 1c195a49..cd481801 100644
--- a/src/app/scenario/scenario.component.ts
+++ b/src/app/scenario/scenario.component.ts
@@ -32,6 +32,7 @@ export class ScenarioComponent implements OnInit, OnDestroy {
   isAnonymous = false;
   validationEnabled = false
   minTestDuration = null
+  isLoading = true;
 
   constructor(
     private route: ActivatedRoute,
@@ -59,7 +60,17 @@ export class ScenarioComponent implements OnInit, OnDestroy {
     });
 
     if (!this.isAnonymous) {
-      this.items$ = this.itemsService.items$;
+      this.items$ = this.itemsService.items$
+      this.items$
+        .pipe(catchError(r => {
+          this.isLoading = false;
+          return of(r);
+        }))
+        .subscribe(items => {
+        if (items.name) {
+          this.isLoading = false;
+        }
+      })
       this.environment$ = this.environmentService.environment$.subscribe(value => this.page = 1);
 
       this.route.params.pipe<any>(