fix: sidebar flicker on reloading acount pages

npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts

@@ -1,49 +1,37 @@
-import {
+import { Component, inject, isDevMode, OnInit, Optional, SkipSelf, Type } from '@angular/core';
-  Component,
+import { ActivatedRoute, Router } from '@angular/router';
-  inject,
+import { eLayoutType } from '../enums/common';
-  isDevMode,
+import { ABP } from '../models';
-  OnInit,
+import { ReplaceableComponents } from '../models/replaceable-components';
-  Optional,
+import { LocalizationService } from '../services/localization.service';
-  SkipSelf,
+import { ReplaceableComponentsService } from '../services/replaceable-components.service';
-  Type
+import { RouterEvents } from '../services/router-events.service';
-} from '@angular/core';
+import { RoutesService } from '../services/routes.service';
-import {ActivatedRoute, Router} from '@angular/router';
+import { SubscriptionService } from '../services/subscription.service';
-import {eLayoutType} from '../enums/common';
+import { findRoute, getRoutePath } from '../utils/route-utils';
-import {ABP} from '../models';
+import { TreeNode } from '../utils/tree-utils';
-import {ReplaceableComponents} from '../models/replaceable-components';
+import { DYNAMIC_LAYOUTS_TOKEN } from '../tokens/dynamic-layout.token';
-import {LocalizationService} from '../services/localization.service';
-import {ReplaceableComponentsService} from '../services/replaceable-components.service';
-import {RouterEvents} from '../services/router-events.service';
-import {RoutesService} from '../services/routes.service';
-import {SubscriptionService} from '../services/subscription.service';
-import {findRoute, getRoutePath} from '../utils/route-utils';
-import {TreeNode} from '../utils/tree-utils';
-import {DYNAMIC_LAYOUTS_TOKEN} from "../tokens/dynamic-layout.token";
 
 @Component({
   selector: 'abp-dynamic-layout',
-  template: `
+  template: ` <ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container> `,
-    <ng-container *ngIf="isLayoutVisible" [ngComponentOutlet]="layout"></ng-container> `,
   providers: [SubscriptionService],
 })
 export class DynamicLayoutComponent implements OnInit {
   layout?: Type<any>;
   layoutKey?: eLayoutType;
-  readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN)
+  readonly layouts = inject(DYNAMIC_LAYOUTS_TOKEN);
   isLayoutVisible = true;
 
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
   private readonly routes = inject(RoutesService);
-  private localizationService = inject(LocalizationService)
+  private localizationService = inject(LocalizationService);
-  private replaceableComponents = inject(ReplaceableComponentsService)
+  private replaceableComponents = inject(ReplaceableComponentsService);
-  private subscription = inject(SubscriptionService)
+  private subscription = inject(SubscriptionService);
-  private routerEvents = inject(RouterEvents)
+  private routerEvents = inject(RouterEvents);
 
-
+  constructor(@Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent) {
-  constructor(
-    @Optional() @SkipSelf() dynamicLayoutComponent: DynamicLayoutComponent,
-  ) {
     if (dynamicLayoutComponent) {
       if (isDevMode()) console.warn('DynamicLayoutComponent must be used only in AppComponent.');
       return;
@@ -56,7 +44,7 @@ export class DynamicLayoutComponent implements OnInit {
     if (this.layout) {
       return;
     }
-    this.getLayout()
+    // this.getLayout();
   }
 
   private checkLayoutOnNavigationEnd() {
@@ -64,11 +52,9 @@ export class DynamicLayoutComponent implements OnInit {
     this.subscription.addOne(navigationEnd$, () => this.getLayout());
   }
 
-
   private getLayout() {
     let expectedLayout = this.getExtractedLayout();
 
-
     if (!expectedLayout) expectedLayout = eLayoutType.empty;
 
     if (this.layoutKey === expectedLayout) return;
@@ -84,15 +70,11 @@ export class DynamicLayoutComponent implements OnInit {
   }
 
   private getExtractedLayout() {
-    const routeData = (this.route.snapshot.data || {});
+    const routeData = this.route.snapshot.data || {};
     let expectedLayout = routeData['layout'] as eLayoutType;
 
-    if (expectedLayout) {
-      return expectedLayout;
-    }
-
     let node = findRoute(this.routes, getRoutePath(this.router));
-    node = {parent: node} as TreeNode<ABP.Route>;
+    node = { parent: node } as TreeNode<ABP.Route>;
 
     while (node.parent) {
       node = node.parent;
@@ -108,12 +90,12 @@ export class DynamicLayoutComponent implements OnInit {
   showLayoutNotFoundError(layoutName: string) {
     let message = `Layout ${layoutName} not found.`;
     if (layoutName === 'account') {
-      message = 'Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.';
+      message =
+        'Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.';
     }
     console.warn(message);
   }
 
-
   private listenToLanguageChange() {
     this.subscription.addOne(this.localizationService.languageChange$, () => {
       this.isLayoutVisible = false;