[AAE-14061] Fix spinner disappearing too early in task lists (#8577)

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.html

@@ -4,7 +4,7 @@
             [rows]="rows"
             [columns]="columns"
             [data]="dataAdapter"
-            [loading]="isLoading"
+            [loading]="isLoading$ | async"
             [sorting]="formattedSorting"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"

lib/process-services-cloud/src/lib/task/task-list/components/base-task-list-cloud.component.ts

@@ -24,7 +24,7 @@ import {
 } from '@alfresco/adf-core';
 import { taskPresetsCloudDefaultModel } from '../models/task-preset-cloud.model';
 import { TaskQueryCloudRequestModel } from '../../../models/filter-cloud-model';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { TaskListCloudSortingModel } from '../../../models/task-list-sorting.model';
 import { map, take, takeUntil } from 'rxjs/operators';
 import { TaskCloudService } from '../../services/task-cloud.service';
@@ -119,7 +119,6 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
     size: number;
     skipCount: number = 0;
     currentInstanceId: any;
-    isLoading = true;
     selectedInstances: any[];
     formattedSorting: any[];
     dataAdapter: ObjectDataTableAdapter | undefined;
@@ -129,6 +128,9 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
 
     private onDestroy$ = new Subject<boolean>();
 
+    protected abstract isLoading$: Observable<boolean>;
+    protected isLoadingPreferences$ = new BehaviorSubject<boolean>(true);
+
     constructor(appConfigService: AppConfigService,
         private taskCloudService: TaskCloudService,
         private userPreferences: UserPreferencesService,
@@ -169,7 +171,7 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
     }
 
     private retrieveTasksPreferences(): void {
-        this.isLoading = true;
+        this.isLoadingPreferences$.next(true);
         this.cloudPreferenceService.getPreferences(this.appName).pipe(
             take(1),
             map((preferences => {
@@ -199,10 +201,10 @@ export abstract class BaseTaskListCloudComponent<T = unknown> extends DataTableS
 
             this.createDatatableSchema();
             this.createColumns();
-            this.isLoading = false;
+            this.isLoadingPreferences$.next(false);
         }, (error) => {
             this.error.emit(error);
-            this.isLoading = false;
+            this.isLoadingPreferences$.next(false);
         });
     }
 

lib/process-services-cloud/src/lib/task/task-list/components/service-task-list-cloud.component.spec.ts

@@ -128,9 +128,7 @@ describe('ServiceTaskListCloudComponent', () => {
     it('should display empty content when process list is empty', () => {
         const emptyList = { list: { entries: [] } };
         spyOn(serviceTaskListCloudService, 'getServiceTaskByRequest').and.returnValue(of(emptyList));
-
         fixture.detectChanges();
-        expect(component.isLoading).toBe(false);
 
         const loadingContent = fixture.debugElement.query(By.css('mat-progress-spinner'));
         expect(loadingContent).toBeFalsy();
@@ -144,12 +142,9 @@ describe('ServiceTaskListCloudComponent', () => {
         const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
 
         fixture.detectChanges();
-        expect(component.isLoading).toBe(false);
-
         component.ngOnChanges({ appName });
         fixture.detectChanges();
 
-        expect(component.isLoading).toBe(false);
         const loadingContent = fixture.debugElement.query(By.css('mat-progress-spinner'));
         expect(loadingContent).toBeFalsy();
 

lib/process-services-cloud/src/lib/task/task-list/components/service-task-list-cloud.component.ts

@@ -23,9 +23,9 @@ import { ServiceTaskQueryCloudRequestModel } from '../models/service-task-cloud.
 import { BaseTaskListCloudComponent } from './base-task-list-cloud.component';
 import { ServiceTaskListCloudService } from '../services/service-task-list-cloud.service';
 import { TaskCloudService } from '../../services/task-cloud.service';
-import { Subject, combineLatest } from 'rxjs';
+import { Subject, combineLatest, BehaviorSubject } from 'rxjs';
 import { PreferenceCloudServiceInterface, TASK_LIST_PREFERENCES_SERVICE_TOKEN } from '../../../services/public-api';
-import { takeUntil } from 'rxjs/operators';
+import { map, takeUntil } from 'rxjs/operators';
 
 const PRESET_KEY = 'adf-cloud-service-task-list.presets';
 
@@ -41,6 +41,14 @@ export class ServiceTaskListCloudComponent extends BaseTaskListCloudComponent im
 
     private onDestroyServiceTaskList$ = new Subject<boolean>();
 
+    private isReloadingSubject$ = new BehaviorSubject<boolean>(false);
+    isLoading$ = combineLatest([
+        this.isLoadingPreferences$,
+        this.isReloadingSubject$
+    ]).pipe(
+        map(([isLoadingPreferences, isReloading]) => isLoadingPreferences || isReloading)
+    );
+
     constructor(private serviceTaskListCloudService: ServiceTaskListCloudService,
                 appConfigService: AppConfigService,
                 taskCloudService: TaskCloudService,
@@ -56,6 +64,8 @@ export class ServiceTaskListCloudComponent extends BaseTaskListCloudComponent im
     }
 
     reload() {
+        this.isReloadingSubject$.next(true);
+
         this.requestNode = this.createRequestNode();
 
         if (this.requestNode.appName || this.requestNode.appName === '') {
@@ -70,9 +80,10 @@ export class ServiceTaskListCloudComponent extends BaseTaskListCloudComponent im
                     this.rows = tasks.list.entries;
                     this.success.emit(tasks);
                     this.pagination.next(tasks.list.pagination);
+                    this.isReloadingSubject$.next(false);
                 }, (error) => {
                     this.error.emit(error);
-                    this.isLoading = false;
+                    this.isReloadingSubject$.next(false);
                 });
         } else {
             this.rows = [];

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -168,7 +168,6 @@ describe('TaskListCloudComponent', () => {
         const emptyList = { list: { entries: [] } };
         spyOn(taskListCloudService, 'getTaskByRequest').and.returnValue(of(emptyList));
         fixture.detectChanges();
-        expect(component.isLoading).toBe(false);
 
         const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
         component.ngOnChanges({ appName });
@@ -186,12 +185,9 @@ describe('TaskListCloudComponent', () => {
         const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
 
         fixture.detectChanges();
-        expect(component.isLoading).toBe(false);
-
         component.ngOnChanges({ appName });
         fixture.detectChanges();
 
-        expect(component.isLoading).toBe(false);
         const loadingContent = fixture.debugElement.query(By.css('mat-progress-spinner'));
         expect(loadingContent).toBeFalsy();
 

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts

@@ -23,8 +23,8 @@ import { TaskCloudService } from '../../services/task-cloud.service';
 import { TASK_LIST_CLOUD_TOKEN, TASK_LIST_PREFERENCES_SERVICE_TOKEN } from '../../../services/cloud-token.service';
 import { PreferenceCloudServiceInterface } from '../../../services/preference-cloud.interface';
 import { TaskListCloudServiceInterface } from '../../../services/task-list-cloud.service.interface';
-import { Subject, of } from 'rxjs';
+import { Subject, of, BehaviorSubject, combineLatest } from 'rxjs';
-import { switchMap, takeUntil, tap } from 'rxjs/operators';
+import { map, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { VariableMapperService } from '../../../services/variable-mapper.sevice';
 import { ProcessListDataColumnCustomData } from '../../../models/data-column-custom-data';
 import { TaskCloudModel } from '../../../models/task-cloud.model';
@@ -150,6 +150,14 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
     rows: TaskInstanceCloudListViewModel[] = [];
     dataAdapter: TasksListDatatableAdapter | undefined;
 
+    private isReloadingSubject$ = new BehaviorSubject<boolean>(false);
+    isLoading$ = combineLatest([
+        this.isLoadingPreferences$,
+        this.isReloadingSubject$
+    ]).pipe(
+        map(([isLoadingPreferences, isReloading]) => isLoadingPreferences || isReloading)
+    );
+
     constructor(@Inject(TASK_LIST_CLOUD_TOKEN) public taskListCloudService: TaskListCloudServiceInterface,
                 appConfigService: AppConfigService,
                 taskCloudService: TaskCloudService,
@@ -166,7 +174,7 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
     }
 
     reload() {
-        this.isLoading = true;
+        this.isReloadingSubject$.next(true);
 
         this.isColumnSchemaCreated$.pipe(
             switchMap(() => of(this.createRequestNode())),
@@ -187,11 +195,11 @@ export class TaskListCloudComponent extends BaseTaskListCloudComponent<ProcessLi
             this.dataAdapter = new TasksListDatatableAdapter(this.rows, this.columns);
 
             this.success.emit(tasks);
-            this.isLoading = false;
+            this.isReloadingSubject$.next(false);
             this.pagination.next(tasks.list.pagination);
         }, (error) => {
             this.error.emit(error);
-            this.isLoading = false;
+            this.isReloadingSubject$.next(false);
         });
     }