fix(theme-shared): loader bar turning back problem

npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts

@@ -22,21 +22,16 @@ export class SettingManagementService {
     private store: Store,
     private oAuthService: OAuthService,
   ) {
-    if (this.oAuthService.hasValidAccessToken()) {
+    setTimeout(() => this.setSettings(), 0);
-      setTimeout(() => {
+
-        this.setSettings();
+    this.actions
-      }, 0);
+      .pipe(ofActionSuccessful(GetAppConfiguration))
-    } else {
+      .pipe(takeUntil(this.destroy$))
-      this.actions
+      .subscribe(() => {
-        .pipe(ofActionSuccessful(GetAppConfiguration))
+        if (this.oAuthService.hasValidAccessToken()) {
-        .pipe(takeUntil(this.destroy$))
+          this.setSettings();
-        .subscribe(() => {
+        }
-          if (this.oAuthService.hasValidAccessToken()) {
+      });
-            this.setSettings();
-            this.destroy$.next();
-          }
-        });
-    }
   }
 
   ngOnDestroy() {

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

@@ -6,6 +6,12 @@ export const fade = trigger('fade', [
   transition(':leave', animate(250, style({ opacity: 0 }))),
 ]);
 
+export const fadeInOut = trigger('fadeInOut', [
+  state('out', style({ opacity: 0 })),
+  state('in', style({ opacity: 1 })),
+  transition('in <=> out', [animate(250)]),
+]);
+
 export const fadeIn = trigger('fadeIn', [
   state('*', style({ opacity: 1 })),
   transition('* => *', [style({ opacity: 0 }), animate(250)]),

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

@@ -4,6 +4,7 @@ import { NavigationEnd, NavigationStart, Router, NavigationError } from '@angula
 import { takeUntilDestroy } from '@ngx-validate/core';
 import { Actions, ofActionSuccessful } from '@ngxs/store';
 import { filter } from 'rxjs/operators';
+import { timer } from 'rxjs';
 
 @Component({
   selector: 'abp-loader-bar',
@@ -92,8 +93,6 @@ export class LoaderBarComponent implements OnDestroy {
     this.progressLevel = 100;
     this.isLoading = false;
 
-    setTimeout(() => {
+    timer(810).subscribe(() => (this.progressLevel = 0));
-      this.progressLevel = 0;
-    }, 800);
   }
 }