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

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

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

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>

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