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 14f7a35a75..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
@@ -2,9 +2,11 @@ import { SettingTab } from '@abp/ng.theme.shared';
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { Navigate } from '@ngxs/router-plugin';
-import { Store } from '@ngxs/store';
+import { Store, Actions, ofActionSuccessful } from '@ngxs/store';
 import { Subject } from 'rxjs';
-import { ConfigState } from '@abp/ng.core';
+import { ConfigState, GetAppConfiguration } from '@abp/ng.core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { takeUntil } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class SettingManagementService {
@@ -14,10 +16,22 @@ export class SettingManagementService {
 
   private destroy$ = new Subject();
 
-  constructor(private router: Router, private store: Store) {
-    setTimeout(() => {
-      this.setSettings();
-    }, 0);
+  constructor(
+    private actions: Actions,
+    private router: Router,
+    private store: Store,
+    private oAuthService: OAuthService,
+  ) {
+    setTimeout(() => this.setSettings(), 0);
+
+    this.actions
+      .pipe(ofActionSuccessful(GetAppConfiguration))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        if (this.oAuthService.hasValidAccessToken()) {
+          this.setSettings();
+        }
+      });
   }
 
   ngOnDestroy() {
@@ -25,13 +39,11 @@ export class SettingManagementService {
   }
 
   setSettings() {
-    setTimeout(() => {
-      const route = this.router.config.find(r => r.path === 'setting-management');
-      this.settings = (route.data.settings as SettingTab[])
-        .filter(setting => this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy)))
-        .sort((a, b) => a.order - b.order);
-      this.checkSelected();
-    }, 0);
+    const route = this.router.config.find(r => r.path === 'setting-management');
+    this.settings = (route.data.settings as SettingTab[])
+      .filter(setting => this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy)))
+      .sort((a, b) => a.order - b.order);
+    this.checkSelected();
   }
 
   checkSelected() {
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..fb523e0d56 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 fadeWithStates = 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/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 0196ad19ec..7a915d667c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -25,6 +25,6 @@ export class ButtonComponent {
   disabled: boolean = false;
 
   get icon(): string {
-    return `${this.loading ? 'fa fa-spin fa-spinner' : this.iconClass || 'd-none'}`;
+    return `${this.loading ? 'fa fa-pulse fa-spinner' : this.iconClass || 'd-none'}`;
   }
 }
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));
   }
 }