refactor(cdk): improve performance for resize service

taiga-family · Dec 14, 2022 · 292fd21 · 292fd21
1 parent 2619572
commit 292fd21
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/projects/cdk/services/resize.service.ts b/projects/cdk/services/resize.service.ts
@@ -14,6 +14,7 @@ import {
     distinctUntilChanged,
     map,
     mapTo,
+    share,
     takeUntil,
     throttleTime,
 } from 'rxjs/operators';
@@ -33,20 +34,29 @@ export class TuiResizeService extends ResizeObserverService {
         super(elementRef, ngZone, support, box);
 
         return this.pipe(
+            tuiZonefree(ngZone),
+            debounceTime(0),
+            throttleTime(POLLING_TIME),
+            distinctUntilChanged(
+                (
+                    [x]: readonly ResizeObserverEntry[],
+                    [y]: readonly ResizeObserverEntry[],
+                ) => sizeOfEntry(x.target) !== sizeOfEntry(y.target),
+            ),
             catchError(() =>
                 animationFrame$.pipe(
                     throttleTime(POLLING_TIME),
-                    map(
-                        () =>
-                            `${elementRef.nativeElement.clientWidth} ${elementRef.nativeElement.clientHeight}`,
-                    ),
+                    map(() => sizeOfEntry(elementRef.nativeElement)),
                     distinctUntilChanged(),
                     mapTo(EMPTY_ARRAY),
                 ),
             ),
-            debounceTime(0),
-            tuiZonefree(ngZone),
+            share(),
             takeUntil(destroy$),
         );
     }
 }
+
+function sizeOfEntry(element: Element): string {
+    return `${element.clientWidth} ${element.clientHeight}`;
+}
diff --git a/projects/demo/src/modules/app/abstract.app.ts b/projects/demo/src/modules/app/abstract.app.ts
@@ -1,15 +1,15 @@
 import {Directive, ElementRef, HostBinding, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc';
-import {tuiPure, TuiResizeService} from '@taiga-ui/cdk';
+import {TuiDestroyService, tuiPure, TuiResizeService} from '@taiga-ui/cdk';
 import {Observable} from 'rxjs';
 
 import {readyToScrollFactory} from './utils/ready-to-scroll-factory';
 import {TuiVersionMeta} from './version-manager/versions.constants';
 
 export const DEMO_PAGE_LOADED_PROVIDER = {
     provide: TUI_DOC_PAGE_LOADED,
-    deps: [ElementRef, TuiResizeService],
+    deps: [ElementRef, TuiResizeService, TuiDestroyService],
     useFactory: readyToScrollFactory,
 };
 

diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
@@ -29,8 +29,8 @@ import {TuiVersionMeta} from './version-manager/versions.constants';
     templateUrl: `./app.template.html`,
     styleUrls: [`./app.style.less`],
     providers: [
-        TuiDestroyService,
         TuiResizeService,
+        TuiDestroyService,
         DEMO_PAGE_LOADED_PROVIDER,
         TUI_VERSION_MANAGER_PROVIDERS,
     ],

diff --git a/projects/demo/src/modules/app/utils/ready-to-scroll-factory.ts b/projects/demo/src/modules/app/utils/ready-to-scroll-factory.ts
@@ -1,10 +1,11 @@
 import {ElementRef} from '@angular/core';
 import {Observable} from 'rxjs';
-import {debounceTime, map, startWith} from 'rxjs/operators';
+import {debounceTime, map, startWith, takeUntil} from 'rxjs/operators';
 
 export function readyToScrollFactory(
     hostElement: ElementRef<HTMLElement>,
     resize$: Observable<unknown>,
+    destroy$: Observable<unknown>,
 ): Observable<boolean> {
     return resize$.pipe(
         startWith(null),
@@ -19,5 +20,6 @@ export function readyToScrollFactory(
                 codeElements.every(el => el.querySelector(`.t-code`))
             );
         }),
+        takeUntil(destroy$),
     );
 }