Lazy loading topology summary component

src/app/components/project-map/project-map.component.html

@@ -254,12 +254,6 @@
       (closeConsole)="toggleShowConsole($event)"
     ></app-console-wrapper>
   </div>
-  <div [ngClass]="{ visible: !isTopologySummaryVisible }">
-    <app-topology-summary
-      *ngIf="project"
-      [server]="server"
-      [project]="project"
-      (closeTopologySummary)="toggleShowTopologySummary($event)"
-    ></app-topology-summary>
-  </div>
 </div>
+
+<ng-template #topologySummaryContainer></ng-template>

src/app/components/project-map/project-map.component.ts

@@ -1,11 +1,11 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ComponentFactoryResolver, ComponentRef, Injector, OnDestroy, OnInit, SimpleChange, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatDialog } from '@angular/material/dialog';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import * as Mousetrap from 'mousetrap';
 import { from, Observable, Subscription } from 'rxjs';
-import { map, mergeMap } from 'rxjs/operators';
+import { map, mergeMap, takeUntil } from 'rxjs/operators';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
 import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter';
 import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
@@ -74,6 +74,7 @@ import { ImportProjectDialogComponent } from '../projects/import-project-dialog/
 import { NavigationDialogComponent } from '../projects/navigation-dialog/navigation-dialog.component';
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 import { NodeAddedEvent } from '../template/template-list-dialog/template-list-dialog.component';
+import { TopologySummaryComponent } from '../topology-summary/topology-summary.component';
 import { ContextMenuComponent } from './context-menu/context-menu.component';
 import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';
 import { NewTemplateDialogComponent } from './new-template-dialog/new-template-dialog.component';
@@ -103,6 +104,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public gridVisibility: boolean = false;
   public toolbarVisibility: boolean = true;
   public symbolScaling: boolean = true;
+  private instance: ComponentRef<TopologySummaryComponent>;
 
   tools = {
     selection: true,
@@ -121,6 +123,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
   @ViewChild(D3MapComponent) mapChild: D3MapComponent;
   @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;
+  @ViewChild('topologySummaryContainer', {read: ViewContainerRef}) topologySummaryContainer: ViewContainerRef;
 
   private projectMapSubscription: Subscription = new Subscription();
 
@@ -170,7 +173,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private title: Title,
     private nodeConsoleService: NodeConsoleService,
     private symbolService: SymbolService,
-    private cd: ChangeDetectorRef
+    private cd: ChangeDetectorRef,
+    private cfr: ComponentFactoryResolver, 
+    private injector: Injector
   ) {}
 
   ngOnInit() {
@@ -205,7 +210,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.settings = this.settingsService.getAll();
     this.symbolScaling = this.mapSettingsService.getSymbolScaling();
-    this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
     this.isConsoleVisible = this.mapSettingsService.isLogConsoleVisible;
     this.mapSettingsService.logConsoleSubject.subscribe((value) => (this.isConsoleVisible = value));
     this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
@@ -213,6 +217,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? true : false;
   }
 
+  async lazyLoadTopologySummary() {
+    if (this.isTopologySummaryVisible) {
+      const {TopologySummaryComponent} = await import('../topology-summary/topology-summary.component');
+      const componentFactory = this.cfr.resolveComponentFactory(TopologySummaryComponent);
+      this.instance = this.topologySummaryContainer.createComponent(componentFactory, null, this.injector);
+      this.instance.instance.server = this.server;
+      this.instance.instance.project = this.project;
+    } else if (this.instance) {
+      if (this.instance.instance)  {
+        this.instance.instance.ngOnDestroy();
+        this.instance.destroy();
+      }
+    } 
+  }
+
   addSubscriptions() {
     this.projectMapSubscription.add(
       this.mapSettingsService.mapRenderedEmitter.subscribe((value: boolean) => {
@@ -312,6 +331,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
             this.title.setTitle(this.project.name);
 
             this.isInterfaceLabelVisible = this.mapSettingsService.showInterfaceLabels;
+            this.toggleShowTopologySummary(this.mapSettingsService.isTopologySummaryVisible);
 
             this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
             this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
@@ -801,6 +821,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public toggleShowTopologySummary(visible: boolean) {
     this.isTopologySummaryVisible = visible;
     this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
+    this.lazyLoadTopologySummary();
   }
 
   public toggleNotifications(visible: boolean) {