Ensure the loading indicator and the refresh button animated at the correct time.

src/frontend/app/shared/components/list/list.component.html

@@ -97,15 +97,15 @@
             </button>
           </div>
           <button id="app-list-refresh-button" mat-icon-button *ngIf="dataSource.refresh" [disabled]="(dataSource.isLoadingPage$ | async) || (isAddingOrSelecting$ | async)" (click)="refresh()">
-            <mat-icon class="refresh-icon" [ngClass]="{refreshing: isRefreshing}" aria-label="Refresh list data">refresh</mat-icon>
+            <mat-icon class="refresh-icon" [ngClass]="{refreshing: (isRefreshing$ | async)}" aria-label="Refresh list data">refresh</mat-icon>
           </button>
         </div>
 
       </mat-card>
     </div>
     <div class="refresh-button__no-header" *ngIf="dataSource.refresh && !(hasControls$ | async) && (!(hasRowsOrIsFiltering$ | async) && noEntries)">
       <button id="app-list-refresh-button" mat-mini-fab *ngIf="!(isAddingOrSelecting$ | async)" [disabled]="dataSource.isLoadingPage$ | async" (click)="refresh()">
-        <mat-icon class="refresh-icon" [ngClass]="{refreshing: isRefreshing}" aria-label="Refresh list data">refresh</mat-icon>
+        <mat-icon class="refresh-icon" [ngClass]="{refreshing: (isRefreshing$ | async)}" aria-label="Refresh list data">refresh</mat-icon>
       </button>
     </div>
     <div class="list-component__body">

src/frontend/app/shared/components/list/list.component.ts

@@ -24,11 +24,9 @@ import {
   isObservable,
   Observable,
   of as observableOf,
-  queueScheduler,
   Subscription,
 } from 'rxjs';
 import {
-  combineLatest,
   debounceTime,
   distinctUntilChanged,
   filter,
@@ -41,9 +39,10 @@ import {
   subscribeOn,
   takeWhile,
   tap,
-  throttleTime,
+  withLatestFrom,
 } from 'rxjs/operators';
 
+import { safeUnsubscribe } from '../../../core/utils.service';
 import { ListFilter, ListPagination, ListSort, SetListViewAction } from '../../../store/actions/list.actions';
 import { AppState } from '../../../store/app-state';
 import { entityFactory } from '../../../store/helpers/entity-factory';
@@ -65,7 +64,6 @@ import {
   ListViewTypes,
   MultiFilterManager,
 } from './list.component.types';
-import { safeUnsubscribe } from '../../../core/utils.service';
 
 
 @Component({
@@ -186,7 +184,7 @@ export class ListComponent<T> implements OnInit, OnChanges, OnDestroy, AfterView
   isFiltering$: Observable<boolean>;
   noRowsNotFiltering$: Observable<boolean>;
   showProgressBar$: Observable<boolean>;
-  public isRefreshing = false;
+  isRefreshing$: Observable<boolean>;
 
 
 
@@ -492,30 +490,39 @@ export class ListComponent<T> implements OnInit, OnChanges, OnDestroy, AfterView
         })
       );
 
-    const hasChangedPage$ = this.dataSource.pagination$.pipe(
-      map(pag => pag.currentPage),
+    const loadingHasChanged$ = this.dataSource.isLoadingPage$.pipe(
+      distinctUntilChanged(),
       pairwise(),
-      map(([oldPage, newPage]) => oldPage !== newPage),
+      map(([oldLoading, newLoading]) =>
+        oldLoading !== newLoading
+      ),
+      startWith(true)
     );
 
-    const isMaxedResult$ = this.dataSource.pagination$.pipe(
-      map(pag => !!pag.maxedResults),
+    const hasFilterChangedSinceLastLoading$ = loadingHasChanged$.pipe(
+      filter(hasChanged => hasChanged),
+      withLatestFrom(this.dataSource.pagination$),
+      pairwise(),
+      map(([oldData, newData]) => [oldData[1], newData[1]]),
+      map(([oldPage, newPage]) =>
+        oldPage.currentPage !== newPage.currentPage ||
+        oldPage.clientPagination.filter !== newPage.clientPagination.filter ||
+        oldPage.params !== newPage.params
+      ),
+      startWith(true)
     );
 
-    const canShowLoading$ = observableCombineLatest([hasChangedPage$, isMaxedResult$]).pipe(
-      map(([hasChangedPage, isLoadingMaxedResults]) => hasChangedPage || isLoadingMaxedResults),
-      startWith(true),
-      distinctUntilChanged()
+    this.isRefreshing$ = observableCombineLatest(hasFilterChangedSinceLastLoading$, this.dataSource.isLoadingPage$).pipe(
+      map(([hasChanged, loading]) => !hasChanged && loading),
+      startWith(false)
     );
 
     this.showProgressBar$ = this.dataSource.isLoadingPage$.pipe(
-      startWith(true),
-      combineLatest(canShowLoading$),
-      map(([loading, canShowLoading]) => loading && canShowLoading && !this.isRefreshing),
+      withLatestFrom(this.isRefreshing$),
+      map(([loading, isRefreshing]) => !isRefreshing && loading),
       distinctUntilChanged(),
-      throttleTime(100, queueScheduler, { leading: true, trailing: true }),
+      startWith(true),
     );
-
   }
 
   ngAfterViewInit() {
@@ -591,7 +598,6 @@ export class ListComponent<T> implements OnInit, OnChanges, OnDestroy, AfterView
 
   public refresh() {
     if (this.dataSource.refresh) {
-      this.isRefreshing = true;
       this.dataSource.refresh();
       this.dataSource.isLoadingPage$.pipe(
         tap(isLoading => {
@@ -600,7 +606,7 @@ export class ListComponent<T> implements OnInit, OnChanges, OnDestroy, AfterView
           }
         }),
         takeWhile(isLoading => isLoading)
-      ).subscribe(null, null, () => this.isRefreshing = false);
+      );
     }
   }
 

src/frontend/app/store/reducers/pagination-reducer/pagination-reducer-create-pagination.ts

@@ -58,10 +58,9 @@ function mergePaginationSections(
   seedPagination: PaginationEntityState,
   defaultState: PaginationEntityState
 ) {
-  const currentClientPagination = spreadClientPagination(currentPagination.clientPagination);
   const seedClientPagination = spreadClientPagination(seedPagination.clientPagination);
   return {
-    ...currentClientPagination,
+    ...currentPagination.clientPagination,
     totalResults: seedClientPagination.totalResults,
     currentPage: getCurrentPage(currentPagination, seedPagination)
   };

src/frontend/app/store/reducers/pagination-reducer/pagination-reducer-set-client-page-size.ts

@@ -1,13 +1,12 @@
 import { SetClientPageSize } from '../../actions/pagination.actions';
 import { PaginationEntityState } from '../../types/pagination.types';
-import { spreadClientPagination } from './pagination-reducer.helper';
 
 export function paginationSetClientPageSize(state: PaginationEntityState, action: SetClientPageSize) {
   return {
     ...state,
     error: false,
     clientPagination: {
-      ...spreadClientPagination(state.clientPagination),
+      ...state.clientPagination,
       pageSize: action.pageSize
     }
   };

src/frontend/app/store/reducers/pagination-reducer/pagination-reducer-set-client-page.ts

@@ -1,13 +1,12 @@
 import { SetClientPage } from '../../actions/pagination.actions';
 import { PaginationEntityState } from '../../types/pagination.types';
-import { spreadClientPagination } from './pagination-reducer.helper';
 
 export function paginationSetClientPage(state: PaginationEntityState, action: SetClientPage) {
   return {
     ...state,
     error: false,
     clientPagination: {
-      ...spreadClientPagination(state.clientPagination),
+      ...state.clientPagination,
       currentPage: action.pageNumber
     }
   };

src/frontend/app/store/reducers/pagination-reducer/pagination-reducer-set-result-count.ts

@@ -1,6 +1,5 @@
 import { SetResultCount } from '../../actions/pagination.actions';
 import { PaginationEntityState } from '../../types/pagination.types';
-import { spreadClientPagination } from './pagination-reducer.helper';
 
 export function paginationSetResultCount(state: PaginationEntityState, action: SetResultCount) {
   if (state.totalResults === action.count && state.clientPagination.totalResults === action.count) {
@@ -11,7 +10,7 @@ export function paginationSetResultCount(state: PaginationEntityState, action: S
     error: false,
     totalResults: action.count,
     clientPagination: {
-      ...spreadClientPagination(state.clientPagination),
+      ...state.clientPagination,
       totalResults: action.count
     }
   };

src/frontend/app/store/reducers/pagination-reducer/pagination-reducer-success.ts

@@ -1,5 +1,4 @@
 import { PaginationEntityState } from '../../types/pagination.types';
-import { spreadClientPagination } from './pagination-reducer.helper';
 
 export function paginationSuccess(state: PaginationEntityState, action): PaginationEntityState {
   const { apiAction, response, result } = action;
@@ -26,7 +25,7 @@ export function paginationSuccess(state: PaginationEntityState, action): Paginat
     pageCount: totalPages,
     totalResults,
     clientPagination: {
-      ...spreadClientPagination(state.clientPagination),
+      ...state.clientPagination,
       totalResults
     }
   };