diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts index 61f4d2f663..41a5850131 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular import { NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router'; import { takeUntilDestroy } from '@ngx-validate/core'; import { Actions, ofActionSuccessful } from '@ngxs/store'; -import { interval, Subscription, timer } from 'rxjs'; +import { Subscription, timer } from 'rxjs'; import { filter } from 'rxjs/operators'; @Component({ @@ -30,6 +30,10 @@ export class LoaderBarComponent implements OnDestroy, OnInit { @Input() color = '#77b6ff'; + @Input() + filter = (action: StartLoader | StopLoader) => + action.payload.url.indexOf('openid-configuration') < 0; + @Input() isLoading = false; @@ -43,9 +47,23 @@ export class LoaderBarComponent implements OnDestroy, OnInit { stopDelay = 800; - @Input() - filter = (action: StartLoader | StopLoader) => - action.payload.url.indexOf('openid-configuration') < 0; + private readonly clearProgress = () => { + this.progressLevel = 0; + this.cdRef.detectChanges(); + }; + + private readonly reportProgress = () => { + if (this.progressLevel < 75) { + this.progressLevel += 1 + Math.random() * 9; + } else if (this.progressLevel < 90) { + this.progressLevel += 0.4; + } else if (this.progressLevel < 100) { + this.progressLevel += 0.1; + } else { + this.interval.unsubscribe(); + } + this.cdRef.detectChanges(); + }; get boxShadow(): string { return `0 0 10px rgba(${this.color}, 0.5)`; @@ -53,7 +71,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { constructor(private actions: Actions, private router: Router, private cdRef: ChangeDetectorRef) {} - ngOnInit() { + private subscribeToLoadActions() { this.actions .pipe( ofActionSuccessful(StartLoader, StopLoader), @@ -64,7 +82,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit { if (action instanceof StartLoader) this.startLoading(); else this.stopLoading(); }); + } + private subscribeToRouterEvents() { this.router.events .pipe( filter( @@ -81,6 +101,11 @@ export class LoaderBarComponent implements OnDestroy, OnInit { }); } + ngOnInit() { + this.subscribeToLoadActions(); + this.subscribeToRouterEvents(); + } + ngOnDestroy() { if (this.interval) this.interval.unsubscribe(); } @@ -90,32 +115,17 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.isLoading = true; - const moveOn = () => { - if (this.progressLevel < 75) { - this.progressLevel += Math.random() * 10; - } else if (this.progressLevel < 90) { - this.progressLevel += 0.4; - } else if (this.progressLevel < 100) { - this.progressLevel += 0.1; - } else { - this.interval.unsubscribe(); - } - this.cdRef.detectChanges(); - }; - - moveOn(); - this.interval = interval(this.intervalPeriod).subscribe(moveOn); + this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress); } stopLoading() { if (this.interval) this.interval.unsubscribe(); + this.progressLevel = 100; this.isLoading = false; + if (this.timer && !this.timer.closed) return; - this.timer = timer(this.stopDelay).subscribe(() => { - this.progressLevel = 0; - this.cdRef.detectChanges(); - }); + this.timer = timer(this.stopDelay).subscribe(this.clearProgress); } }