Как реализовать глобальный загрузчик в Angular 7.1

Question

У меня есть глобальный загрузчик, который реализован так:

CoreModule:

router.events.pipe(
  filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());

LoaderService:

@Injectable({
    providedIn: 'root'
})
export class LoaderService {

    overlayRef: OverlayRef;
    componentFactory: ComponentFactory<LoaderComponent>;
    componentPortal: ComponentPortal<LoaderComponent>;
    componentRef: ComponentRef<LoaderComponent>;

    constructor(
        private overlay: Overlay,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
        this.overlayRef = this.overlay.create(
            {
                hasBackdrop: true,
                positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
            }
        );

        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);

        this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
    }

    show(message?: string) {
        this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
        this.componentRef.instance.message = message;
    }

    hide() {
        this.overlayRef.detach();
    }
}

При работе с Angular 7.0.2 поведение (которое я хотел) было:

• Показывать загрузчик при разрешении данных, прикрепленных к маршруту, и при загрузке ленивого модуля
• Не показывать загрузчик при навигации по маршруту без распознавателя

Я обновил до Angular 7.2, теперь поведение:

• Показывать загрузчик при разрешении данных, прикрепленных к маршруту, и при загрузке ленивого модуля
• Показывать наложение без LoaderComponent при переходе к маршруту без какого-либо распознавателя

Я добавил несколько журналов событий NavigationStart и NavigationEnd и обнаружил, что NavigationEnd запускается сразу после NavigationStart (что нормально), в то время как Overlay исчезает примерно через 0,5 с.

Я прочитал CHANGELOG.md, но не нашел ничего, что могло бы объяснить эту проблему. Любая идея приветствуется.

Edit:

После дальнейших исследований я восстановил предыдущее поведение, установив package.json следующим образом:

"@angular/cdk": "~7.0.0",
"@angular/material": "~7.0.0",

вместо этого:

"@angular/cdk": "~7.2.0",
"@angular/material": "~7.2.0",

Я обнаружил неисправный коммит, выпущенный в версии 7.1.0, и опубликовал свою проблему в связанной с проблеме GitHub . Исправлена ​​анимация затухания Overlay.

Что такое совместимый с v7.1 + способ получить желаемое поведение? По моему мнению, лучшее, что можно сделать: показывать загрузчик только при необходимости, но NavigationStart не содержит необходимой информации. Я бы хотел избежать какого-либо поведения отказов.

Answer 1

Способ реализации загрузчика в нашей системе со списком исключений:

export class LoaderInterceptor implements HttpInterceptor {
  requestCount = 0;

  constructor(private loaderService: LoaderService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (!(REQUEST_LOADER_EXCEPTIONS.find(r => request.url.includes(r)))) {
      this.loaderService.setLoading(true);
      this.requestCount++;
    }

    return next.handle(request).pipe(
      tap(res => {
        if (res instanceof HttpResponse) {
          if (!(REQUEST_LOADER_EXCEPTIONS.find(r => request.url.includes(r)))) {
            this.requestCount--;
          }
          if (this.requestCount <= 0) {
            this.loaderService.setLoading(false);
          }
        }
      }),
      catchError(err => {
        this.loaderService.setLoading(false);
        this.requestCount = 0;
        throw err;
      })
    );
  }
}

и служба загрузчика работает просто (задержка 300 мс не позволяет загрузчику мигать на экране при быстром ответе):

export class LoaderService {
  loadingRequest = new BehaviorSubject(false);
  private timeout: any;

  setLoading(val: boolean): void {
    if (!val) {
      this.timeout = setTimeout(() => {
        this.loadingRequest.next(val);
      }, 300);
    } else {
      clearTimeout(this.timeout);
      this.loadingRequest.next(val);
    }
  }
}

Answer 2

Вот что я закончил, поняв, что debounceTime было хорошим решением с точки зрения UX, потому что позволяло загрузчику показывать только тогда, когда время загрузки стоит показывать загрузчик.

counter = 0;

router.events.pipe(
  filter(x => x instanceof NavigationStart),
  debounceTime(200),
).subscribe(() => {
  /*
  If this condition is true, then the event corresponding to the end of this NavigationStart
  has not passed yet so we show the loader
  */
  if (this.counter === 0) {
    loaderService.show();
  }
  this.counter++;
});

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => {
  this.counter--;
  loaderService.hide();
});