feat: loading progress spinner (#807)

src/app/debug/table/table.component.html

@@ -103,7 +103,7 @@
           </button>
         }
       }
-      <app-active-filters class="ml-2" (click)="toggleFilter()"></app-active-filters>
+      <app-active-filters class="ml-2" (click)="toggleFilter()"/>
     </div>
     @if (hasTimedOut) {
       <h4 class="progress-report-timeout">[One or more reports are in progress for more
@@ -161,6 +161,8 @@ <h4 class="progress-report-timeout">[One or more reports are in progress for mor
       </table>
     </div>
   </div>
+} @else {
+  <app-loading-spinner/>
 }
 
 <app-table-settings-modal (openLatestReportsEvent)="openLatestReports($event)"></app-table-settings-modal>

src/app/debug/table/table.component.ts

@@ -11,9 +11,7 @@ import { TabService } from '../../shared/services/tab.service';
 import { FilterService } from '../filter-side-drawer/filter.service';
 import { ReportData } from '../../shared/interfaces/report-data';
 import { TableCellShortenerPipe } from '../../shared/pipes/table-cell-shortener.pipe';
-import { ToastComponent } from '../../shared/components/toast/toast.component';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ActiveFiltersComponent } from '../active-filters/active-filters.component';
 import { FormControl, FormsModule, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms';
 import {
@@ -24,7 +22,7 @@ import {
   NgbDropdownToggle,
 } from '@ng-bootstrap/ng-bootstrap';
 import { FilterSideDrawerComponent } from '../filter-side-drawer/filter-side-drawer.component';
-import { KeyValuePipe, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { View } from '../../shared/interfaces/view';
 import { OptionsSettings } from '../../shared/interfaces/options-settings';
@@ -34,6 +32,7 @@ import { DebugTabService } from '../debug-tab.service';
 import { ViewDropdownComponent } from '../../shared/components/view-dropdown/view-dropdown.component';
 import { DeleteModalComponent } from '../../shared/components/delete-modal/delete-modal.component';
 import { RefreshCondition } from '../../shared/interfaces/refresh-condition';
+import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
 
 @Component({
   selector: 'app-table',
@@ -50,16 +49,14 @@ import { RefreshCondition } from '../../shared/interfaces/refresh-condition';
     ReactiveFormsModule,
     FormsModule,
     ActiveFiltersComponent,
-    MatProgressSpinnerModule,
     MatSortModule,
     NgClass,
     TableSettingsModalComponent,
-    ToastComponent,
-    KeyValuePipe,
     TableCellShortenerPipe,
     MatTableModule,
     ViewDropdownComponent,
     DeleteModalComponent,
+    LoadingSpinnerComponent,
   ],
 })
 export class TableComponent implements OnInit, OnDestroy {

src/app/shared/components/loading-spinner/loading-spinner.component.css

@@ -0,0 +1,5 @@
+.loading-spinner {
+  color: #fdc300;
+  width: 3rem;
+  height: 3rem;
+}

src/app/shared/components/loading-spinner/loading-spinner.component.html

@@ -0,0 +1,5 @@
+<div data-cy-loading-spinner class="flex justify-content-center">
+  <div class="spinner-border loading-spinner ml-auto" role="status">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingSpinnerComponent } from './loading-spinner.component';
+
+describe('LoadingSpinnerComponent', () => {
+  let component: LoadingSpinnerComponent;
+  let fixture: ComponentFixture<LoadingSpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoadingSpinnerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoadingSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/loading-spinner/loading-spinner.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [],
+  templateUrl: './loading-spinner.component.html',
+  styleUrl: './loading-spinner.component.css',
+})
+export class LoadingSpinnerComponent {}

src/app/test/test.component.html

@@ -1,4 +1,4 @@
-<div class="row h-100" >
+<div class="row h-100">
   <div class="col-3 resizable-horizontal p-2 border-right">
     <app-test-folder-tree (changeFolderEvent)="changeFilter($event)"></app-test-folder-tree>
   </div>
@@ -35,11 +35,14 @@
     </div>
 
     <p>Generator is {{ generatorEnabled|booleanToString: 'enabled':'disabled' }}</p>
-
-    <app-test-table
-      [reports]="filteredReports" [currentFilter]="currentFilter"
-      [showStorageIds]="showStorageIds" (runEvent)="run($event)">
-    </app-test-table>
+    @if (loading) {
+      <app-loading-spinner/>
+    } @else {
+      <app-test-table
+        [reports]="filteredReports" [currentFilter]="currentFilter"
+        [showStorageIds]="showStorageIds" (runEvent)="run($event)">
+      </app-test-table>
+    }
   </div>
 </div>
 

src/app/test/test.component.ts

@@ -10,7 +10,6 @@ import { HelperService } from '../shared/services/helper.service';
 import { ToastService } from '../shared/services/toast.service';
 import { UpdatePathSettings } from '../shared/interfaces/update-path-settings';
 import { TestFolderTreeComponent } from './test-folder-tree/test-folder-tree.component';
-import { ToastComponent } from '../shared/components/toast/toast.component';
 import { FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
 import { TestListItem } from '../shared/interfaces/test-list-item';
 import { OptionsSettings } from '../shared/interfaces/options-settings';
@@ -20,6 +19,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { TestReportsService } from './test-reports.service';
 import { TestTableComponent } from './test-table/test-table.component';
 import { DeleteModalComponent } from '../shared/components/delete-modal/delete-modal.component';
+import { LoadingSpinnerComponent } from '../shared/components/loading-spinner/loading-spinner.component';
 
 export const updatePathActionConst = ['move', 'copy'] as const;
 export type UpdatePathAction = (typeof updatePathActionConst)[number];
@@ -33,12 +33,12 @@ export type UpdatePathAction = (typeof updatePathActionConst)[number];
     TestFolderTreeComponent,
     ReactiveFormsModule,
     FormsModule,
-    ToastComponent,
     TestSettingsModalComponent,
     CloneModalComponent,
     BooleanToStringPipe,
     DeleteModalComponent,
     TestTableComponent,
+    LoadingSpinnerComponent,
   ],
 })
 export class TestComponent implements OnInit, OnDestroy {
@@ -48,18 +48,18 @@ export class TestComponent implements OnInit, OnDestroy {
   protected filteredReports: TestListItem[] = [];
   protected generatorEnabled: boolean = false;
   protected currentFilter: string = '';
+  protected loading: boolean = true;
+
   protected showStorageIds?: boolean;
 
-  private updatePathAction: UpdatePathAction = 'move';
-  @ViewChild(CloneModalComponent) cloneModal!: CloneModalComponent;
-  @ViewChild(TestSettingsModalComponent)
-  testSettingsModal!: TestSettingsModalComponent;
-  @ViewChild(DeleteModalComponent) deleteModal!: DeleteModalComponent;
-  @ViewChild(TestFolderTreeComponent)
-  testFileTreeComponent!: TestFolderTreeComponent;
-  @ViewChild('moveToInput', { read: NgModel }) moveToInputModel!: NgModel;
-  @ViewChild(TestTableComponent) testTableComponent!: TestTableComponent;
+  @ViewChild(CloneModalComponent) protected cloneModal!: CloneModalComponent;
+  @ViewChild(TestSettingsModalComponent) protected testSettingsModal!: TestSettingsModalComponent;
+  @ViewChild(DeleteModalComponent) protected deleteModal!: DeleteModalComponent;
+  @ViewChild(TestFolderTreeComponent) protected testFileTreeComponent!: TestFolderTreeComponent;
+  @ViewChild('moveToInput', { read: NgModel }) protected moveToInputModel!: NgModel;
+  @ViewChild(TestTableComponent) protected testTableComponent!: TestTableComponent;
 
+  private updatePathAction: UpdatePathAction = 'move';
   private testReportServiceSubscription?: Subscription;
 
   constructor(
@@ -108,6 +108,7 @@ export class TestComponent implements OnInit, OnDestroy {
   }
 
   loadData(path?: string): void {
+    this.loading = true;
     if (path && path.endsWith('/')) {
       path = path.slice(0, -1);
     }
@@ -119,8 +120,8 @@ export class TestComponent implements OnInit, OnDestroy {
           this.testFileTreeComponent.tree.selectItem(path ?? this.testFileTreeComponent.rootFolder.name);
         }
         this.matches();
+        this.loading = false;
       },
-      error: () => catchError(this.errorHandler.handleError()),
     });
     this.testReportsService.getReports();
   }