Add loading indicators and error handling for async data (#422)

ludeknovy · Sep 30, 2024 · 28441c1 · 28441c1
1 parent 79e8c55
commit 28441c1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>(