From a5ee78910afb9fd68b86f7892ba0c85378650ce1 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Tue, 12 May 2020 12:50:13 +0300
Subject: [PATCH] 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';
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
       <div
         class="abp-progress"
+        [class.progressing]="progressLevel"
         [style.width.vw]="progressLevel"
         [ngStyle]="{
           'background-color': color,
@@ -40,7 +41,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
 
   intervalPeriod = 350;
 
-  stopDelay = 820;
+  stopDelay = 800;
 
   @Input()
   filter = (action: StartLoader | StopLoader) =>
@@ -85,10 +86,11 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   }
 
   startLoading() {
-    if (this.isLoading || this.progressLevel !== 0) return;
+    if (this.isLoading || (this.interval && !this.interval.closed)) return;
 
     this.isLoading = true;
-    this.interval = interval(this.intervalPeriod).subscribe(() => {
+
+    const progress = () => {
       if (this.progressLevel < 75) {
         this.progressLevel += Math.random() * 10;
       } else if (this.progressLevel < 90) {
@@ -99,7 +101,10 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
         this.interval.unsubscribe();
       }
       this.cdRef.detectChanges();
-    });
+    };
+
+    progress();
+    this.interval = interval(this.intervalPeriod).subscribe(() => progress());
   }
 
   stopLoading() {