fix(sidebar): toggle performance issues (#5658)

* refactor: improve observable layout change sharing
* feat: add safe delayed event of layout change
* fix: replace change layout with safe change
* fix: limit front card width to prevent map overflow before repaint

src/app/@core/utils/layout.service.ts

@@ -1,20 +1,26 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { delay, share } from 'rxjs/operators';
+import { delay, shareReplay, debounceTime } from 'rxjs/operators';
 
 @Injectable()
 export class LayoutService {
 
   protected layoutSize$ = new Subject();
+  protected layoutSizeChange$ = this.layoutSize$.pipe(
+    shareReplay({ refCount: true }),
+  );
 
   changeLayoutSize() {
     this.layoutSize$.next();
   }
 
   onChangeLayoutSize(): Observable<any> {
-    return this.layoutSize$.pipe(
-      share(),
-      delay(1),
+    return this.layoutSizeChange$.pipe(delay(1));
+  }
+
+  onSafeChangeLayoutSize(): Observable<any> {
+    return this.layoutSizeChange$.pipe(
+      debounceTime(350),
     );
   }
 }

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -27,7 +27,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/dashboard/traffic/traffic-chart.component.ts

@@ -26,7 +26,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/charts-panel/charts/orders-chart.component.ts

@@ -35,7 +35,7 @@ export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/charts-panel/charts/profit-chart.component.ts

@@ -24,7 +24,7 @@ export class ProfitChartComponent implements AfterViewInit, OnDestroy, OnChanges
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts

@@ -33,7 +33,7 @@ export class CountryOrdersChartComponent implements AfterViewInit, OnDestroy, On
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/earning-card/front-side/earning-live-update-chart.component.ts

@@ -23,7 +23,7 @@ export class EarningLiveUpdateChartComponent implements AfterViewInit, OnDestroy
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/profit-card/back-side/stats-area-chart.component.ts

@@ -24,7 +24,7 @@ export class StatsAreaChartComponent implements AfterViewInit, OnDestroy {
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/profit-card/front-side/stats-bar-animation-chart.component.ts

@@ -27,7 +27,7 @@ export class StatsBarAnimationChartComponent implements AfterViewInit, OnDestroy
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/profit-card/profit-card.component.scss

@@ -10,7 +10,12 @@
     cursor: pointer;
   }
 
-  ::ng-deep .flipped {
+  ::ng-deep {
+    .front-container {
+      max-width: 100%;
+    }
+
+    .flipped {
       .back-container {
         .flip-icon {
           transform: scaleX(-1);
@@ -24,3 +29,4 @@
       }
     }
   }
+}

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts

@@ -28,7 +28,7 @@ export class TrafficBarChartComponent implements AfterViewInit, OnDestroy, OnCha
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.ts

@@ -31,7 +31,7 @@ export class ECommerceVisitorsAnalyticsChartComponent implements AfterViewInit,
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.ts

@@ -21,7 +21,7 @@ export class ECommerceVisitorsStatisticsComponent implements AfterViewInit, OnDe
 
   constructor(private theme: NbThemeService,
               private layoutService: LayoutService) {
-    this.layoutService.onChangeLayoutSize()
+    this.layoutService.onSafeChangeLayoutSize()
       .pipe(
         takeWhile(() => this.alive),
       )