From a5ee78910afb9fd68b86f7892ba0c85378650ce1 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 12 May 2020 12:50:13 +0300 Subject: [PATCH 1/5] fix(theme-shared): fix loader bar problem --- .../components/loader-bar/loader-bar.component.scss | 5 ++++- .../components/loader-bar/loader-bar.component.ts | 13 +++++++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss index 2dd3482e27..19a4f2ee8f 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss @@ -16,6 +16,9 @@ left: 0; position: fixed; top: 0; - transition: width 0.4s ease; + + &.progressing { + transition: width 0.4s ease; + } } } 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 441359e476..de37ca18f7 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 @@ -12,6 +12,7 @@ import { filter } from 'rxjs/operators';
Date: Tue, 12 May 2020 12:52:19 +0300 Subject: [PATCH 3/5] chore: change fn name resolves #3650 --- .../src/lib/components/loader-bar/loader-bar.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 de37ca18f7..426f3bb0f2 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 @@ -90,7 +90,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.isLoading = true; - const progress = () => { + const moveOn = () => { if (this.progressLevel < 75) { this.progressLevel += Math.random() * 10; } else if (this.progressLevel < 90) { @@ -103,8 +103,8 @@ export class LoaderBarComponent implements OnDestroy, OnInit { this.cdRef.detectChanges(); }; - progress(); - this.interval = interval(this.intervalPeriod).subscribe(() => progress()); + moveOn(); + this.interval = interval(this.intervalPeriod).subscribe(() => moveOn()); } stopLoading() { From 2a21eb7639c1b64d5d8bf149b36b35b4871fd3d5 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 12 May 2020 12:56:49 +0300 Subject: [PATCH 4/5] refactor(theme-shared): improve code quality --- .../src/lib/components/loader-bar/loader-bar.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 426f3bb0f2..61f4d2f663 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 @@ -104,7 +104,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit { }; moveOn(); - this.interval = interval(this.intervalPeriod).subscribe(() => moveOn()); + this.interval = interval(this.intervalPeriod).subscribe(moveOn); } stopLoading() { From d3543c7c4c33fb0b262200d90ea42bc1b5a571ca Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Thu, 14 May 2020 18:46:14 +0300 Subject: [PATCH 5/5] refactor: move ops to seperate methods and properties --- .../loader-bar/loader-bar.component.ts | 58 +++++++++++-------- 1 file changed, 34 insertions(+), 24 deletions(-) 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); } }