diff --git a/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts b/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
index c7d9e15620..79878b1717 100644
--- a/npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts
+++ b/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);
-    } else {
-      this.actions
-        .pipe(ofActionSuccessful(GetAppConfiguration))
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(() => {
-          if (this.oAuthService.hasValidAccessToken()) {
-            this.setSettings();
-            this.destroy$.next();
-          }
-        });
-    }
+    setTimeout(() => this.setSettings(), 0);
+
+    this.actions
+      .pipe(ofActionSuccessful(GetAppConfiguration))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        if (this.oAuthService.hasValidAccessToken()) {
+          this.setSettings();
+        }
+      });
   }
 
   ngOnDestroy() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
index 906e6fb526..d5180f35ea 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
+++ b/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)]),
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 8200642e26..d52b9faffc 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
@@ -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(() => {
-      this.progressLevel = 0;
-    }, 800);
+    timer(810).subscribe(() => (this.progressLevel = 0));
   }
 }