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

This commit is contained in:
Robert Duda
2023-05-23 11:31:55 +02:00
committed by GitHub
parent c9e79e0f9f
commit 5abb6fbee9
6 changed files with 35 additions and 23 deletions

View File

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

View File

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

View File

@@ -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();

View File

@@ -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 = [];

View File

@@ -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();

View File

@@ -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 { switchMap, takeUntil, tap } from 'rxjs/operators';
import { Subject, of, BehaviorSubject, combineLatest } from 'rxjs';
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);
});
}