Merge pull request #7001 from abpframework/fix/loader-change-detection

change detection error fix

npm/ng-packs/packages/core/src/lib/services/http-wait.service.ts

@@ -54,17 +54,21 @@ export class HttpWaitService {
     this.store.patch({ requests });
   }
 
-  addFilter(request: HttpRequestInfo) {
+  addFilter(request: HttpRequestInfo | HttpRequestInfo[]) {
+    const requests = Array.isArray(request) ? request : [request];
     const filteredRequests = [
-      ...this.store.state.filteredRequests.filter(f => !this.isSameRequest(f, request)),
-      request,
+      ...this.store.state.filteredRequests.filter(
+        f => !requests.some(r => this.isSameRequest(f, r)),
+      ),
+      ...requests,
     ];
     this.store.patch({ filteredRequests });
   }
 
-  removeFilter(request: HttpRequestInfo) {
+  removeFilter(request: HttpRequestInfo | HttpRequestInfo[]) {
+    const requests = Array.isArray(request) ? request : [request];
     const filteredRequests = this.store.state.filteredRequests.filter(
-      f => !this.isSameRequest(f, request),
+      f => !requests.some(r => this.isSameRequest(f, r)),
     );
     this.store.patch({ filteredRequests });
   }

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -1,7 +1,8 @@
 import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { combineLatest, Subscription, timer } from 'rxjs';
+import { LOADER_DELAY } from '../../tokens/lodaer-delay.token';
 
 @Component({
   selector: 'abp-loader-bar',
@@ -77,7 +78,10 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     private subscription: SubscriptionService,
     private httpWaitService: HttpWaitService,
     private routerWaiterService: RouterWaitService,
-  ) {}
+    @Inject(LOADER_DELAY) delay: number,
+  ) {
+    this.httpWaitService.setDelay(delay);
+  }
 
   ngOnInit() {
     this.subscribeLoading();
@@ -102,6 +106,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
 
     this.isLoading = true;
     this.progressLevel = 0;
+    this.cdRef.detectChanges();
     this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
     this.timer.unsubscribe();
   }

npm/ng-packs/packages/theme-shared/src/lib/models/common.ts

@@ -4,6 +4,7 @@ import { Validation } from '@ngx-validate/core';
 export interface RootParams {
   httpErrorConfig: HttpErrorConfig;
   validation?: Partial<Validation.Config>;
+  loaderDelay?: number;
 }
 
 export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;

npm/ng-packs/packages/theme-shared/src/lib/tests/loader-bar.component.spec.ts

@@ -4,6 +4,7 @@ import { Subject, timer } from 'rxjs';
 import { LoaderBarComponent } from '../components/loader-bar/loader-bar.component';
 import { HttpWaitService, SubscriptionService } from '@abp/ng.core';
 import { HttpRequest } from '@angular/common/http';
+import { LOADER_DELAY } from '../tokens/lodaer-delay.token';
 
 describe('LoaderBarComponent', () => {
   let spectator: Spectator<LoaderBarComponent>;
@@ -13,7 +14,11 @@ describe('LoaderBarComponent', () => {
   const createComponent = createComponentFactory({
     component: LoaderBarComponent,
     detectChanges: false,
-    providers: [SubscriptionService, { provide: Router, useValue: { events: events$ } }],
+    providers: [
+      SubscriptionService,
+      { provide: Router, useValue: { events: events$ } },
+      { provide: LOADER_DELAY, useValue: 0 },
+    ],
   });
 
   beforeEach(() => {

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -34,8 +34,9 @@ import { initLazyStyleHandler } from './handlers/lazy-style.handler';
 import { RootParams } from './models/common';
 import { THEME_SHARED_ROUTE_PROVIDERS } from './providers/route.provider';
 import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token';
-import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token';
+import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.token';
 import { DateParserFormatter } from './utils/date-parser-formatter';
+import { LOADER_DELAY } from './tokens/lodaer-delay.token';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -77,7 +78,7 @@ export class BaseThemeSharedModule {}
 })
 export class ThemeSharedModule {
   static forRoot(
-    { httpErrorConfig, validation = {} } = {} as RootParams,
+    { httpErrorConfig, validation = {}, loaderDelay = 500 } = {} as RootParams,
   ): ModuleWithProviders<ThemeSharedModule> {
     return {
       ngModule: ThemeSharedModule,
@@ -123,6 +124,10 @@ export class ThemeSharedModule {
           provide: VALIDATION_VALIDATE_ON_SUBMIT,
           useValue: validation.validateOnSubmit,
         },
+        {
+          provide: LOADER_DELAY,
+          useValue: loaderDelay,
+        },
       ],
     };
   }

npm/ng-packs/packages/theme-shared/src/lib/tokens/index.ts

@@ -1,4 +1,5 @@
 export * from './append-content.token';
 export * from './http-error.token';
 export * from './lazy-styles.token';
+export * from './lodaer-delay.token';
 export * from './suppress-unsaved-changes-warning.token';

npm/ng-packs/packages/theme-shared/src/lib/tokens/lodaer-delay.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const LOADER_DELAY = new InjectionToken<number>('LOADER_DELAY');

npm/ng-packs/packages/theme-shared/testing/src/lib/theme-shared-testing.module.ts

@@ -3,6 +3,7 @@ import {
   DateParserFormatter,
   DEFAULT_VALIDATION_BLUEPRINTS,
   THEME_SHARED_ROUTE_PROVIDERS,
+  LOADER_DELAY,
 } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -46,6 +47,10 @@ export class ThemeSharedTestingModule {
           provide: VALIDATION_VALIDATE_ON_SUBMIT,
           useValue: validation.validateOnSubmit,
         },
+        {
+          provide: LOADER_DELAY,
+          useValue: 0,
+        },
       ],
     };
   }