+
- @if (profile$ | async) {
-
- @if (selectedTab === 0) {
-
-
-
- {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-
-
-
-
-
- }
- @if (selectedTab === 1) {
-
-
-
- {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-
-
-
-
+ @if (profile()) {
+
+ @if (selectedTab === 0) {
+
+
+
+ {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+
+
+
+
+
+ }
+ @if (selectedTab === 1) {
+
+
+
+ {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+
+
+
+
+
+ }
- }
-
}
-
\ No newline at end of file
+
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index 5be91d34f7..6daa273196 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -1,9 +1,10 @@
import { ProfileService } from '@abp/ng.account.core/proxy';
import { LoadingDirective } from '@abp/ng.theme.shared';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { finalize } from 'rxjs/operators';
import { eAccountComponents } from '../../enums/components';
import { ManageProfileStateService } from '../../services/manage-profile.state.service';
-import { AsyncPipe } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
import { PersonalSettingsComponent } from '../personal-settings/personal-settings.component';
@@ -33,7 +34,6 @@ import { ChangePasswordComponent } from '../change-password/change-password.comp
`,
],
imports: [
- AsyncPipe,
ReactiveFormsModule,
PersonalSettingsComponent,
ChangePasswordComponent,
@@ -52,17 +52,23 @@ export class ManageProfileComponent implements OnInit {
personalSettingsKey = eAccountComponents.PersonalSettings;
- profile$ = this.manageProfileState.getProfile$();
+ profile = toSignal(this.manageProfileState.getProfile$());
+
+ profileLoading = signal(false);
hideChangePasswordTab?: boolean;
ngOnInit() {
- this.profileService.get().subscribe(profile => {
- this.manageProfileState.setProfile(profile);
- if (profile.isExternal) {
- this.hideChangePasswordTab = true;
- this.selectedTab = 1;
- }
- });
+ this.profileLoading.set(true);
+ this.profileService
+ .get()
+ .pipe(finalize(() => this.profileLoading.set(false)))
+ .subscribe(profile => {
+ this.manageProfileState.setProfile(profile);
+ if (profile.isExternal) {
+ this.hideChangePasswordTab = true;
+ this.selectedTab = 1;
+ }
+ });
}
}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
index 2d1fbb0ddc..3c5c01c9f9 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
@@ -47,32 +47,31 @@ export class LoadingDirective implements OnInit, OnDestroy {
private handleLoadingChange(newValue: boolean) {
setTimeout(() => {
- if (!newValue && this.timerSubscription) {
- this.timerSubscription.unsubscribe();
- this.timerSubscription = null;
-
- if (this.rootNode) {
- this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
- this.rootNode = null;
- }
+ if (!newValue) {
+ this.clearLoading();
return;
}
+ if (this.timerSubscription) {
+ this.timerSubscription.unsubscribe();
+ }
+
this.timerSubscription = timer(this.delay())
.pipe(take(1))
.subscribe(() => {
+ if (!this.loading()) {
+ return;
+ }
+
if (!this.componentRef) {
this.componentRef = this.viewContainerRef.createComponent(LoadingComponent, {
injector: this.injector
});
}
- if (newValue && !this.rootNode) {
+ if (!this.rootNode) {
this.rootNode = (this.componentRef.hostView as EmbeddedViewRef
).rootNodes[0];
this.targetElement?.appendChild(this.rootNode as HTMLDivElement);
- } else if (this.rootNode) {
- this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
- this.rootNode = null;
}
this.timerSubscription = null;
@@ -80,6 +79,18 @@ export class LoadingDirective implements OnInit, OnDestroy {
}, 0);
}
+ private clearLoading() {
+ if (this.timerSubscription) {
+ this.timerSubscription.unsubscribe();
+ this.timerSubscription = null;
+ }
+
+ if (this.rootNode?.parentElement) {
+ this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
+ this.rootNode = null;
+ }
+ }
+
ngOnInit() {
this.targetElement = this.targetElementInput();
if (!this.targetElement) {
@@ -93,8 +104,6 @@ export class LoadingDirective implements OnInit, OnDestroy {
}
ngOnDestroy() {
- if (this.timerSubscription) {
- this.timerSubscription.unsubscribe();
- }
+ this.clearLoading();
}
}