From dd15c4c8a6f006e11e5cf4e1253c3623d1a7999d Mon Sep 17 00:00:00 2001 From: Daniel Olaru Date: Tue, 25 Mar 2025 17:01:16 +0200 Subject: [PATCH 1/3] perf(cdk-experimental/column-resize): improve hover responsiveness of column resize with requestAnimationFrame Improve column resize performance when calling the `_updateOverlayHandleHeight()` method in the `cdk-experimental` column resize feature. By wrapping the `updateSize` call inside a `requestAnimationFrame()`, the height update is deferred to the next repaint, improving responsiveness during hover interactions. --- src/cdk-experimental/column-resize/resizable.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts index fafe5141dd8a..69858e147cff 100644 --- a/src/cdk-experimental/column-resize/resizable.ts +++ b/src/cdk-experimental/column-resize/resizable.ts @@ -284,7 +284,9 @@ export abstract class Resizable } private _updateOverlayHandleHeight() { - this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight}); + requestAnimationFrame(() => { + this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight}); + }) } private _applySize(sizeInPixels: number, previousSize?: number): void { From d99fbd3409a813ea105dfba33e2071a8e33ecfb7 Mon Sep 17 00:00:00 2001 From: Daniel Olaru Date: Fri, 28 Mar 2025 04:27:41 +0200 Subject: [PATCH 2/3] perf(cdk-experimental/column-resize): improve hover responsiveness of column resize with requestAnimationFrame use afterNextRender write phase instead --- src/cdk-experimental/column-resize/resizable.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts index 69858e147cff..f51e3a51f793 100644 --- a/src/cdk-experimental/column-resize/resizable.ts +++ b/src/cdk-experimental/column-resize/resizable.ts @@ -18,6 +18,8 @@ import { Type, ViewContainerRef, ChangeDetectorRef, + afterNextRender, + runInInjectionContext } from '@angular/core'; import {Directionality} from '@angular/cdk/bidi'; import {ComponentPortal} from '@angular/cdk/portal'; @@ -284,9 +286,13 @@ export abstract class Resizable } private _updateOverlayHandleHeight() { - requestAnimationFrame(() => { - this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight}); - }) + runInInjectionContext(this.injector, () => { + afterNextRender({ + write: () => { + this.overlayRef!.updateSize({ height: this.elementRef.nativeElement!.offsetHeight }); + } + }); + }); } private _applySize(sizeInPixels: number, previousSize?: number): void { From d9e4777c859e609309ecf1744ba24e025a5fde7a Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 2 Apr 2025 19:40:57 +0000 Subject: [PATCH 3/3] fixup! perf(cdk-experimental/column-resize): improve hover responsiveness of column resize with requestAnimationFrame --- src/cdk-experimental/column-resize/resizable.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts index f51e3a51f793..8e2726a6f9f1 100644 --- a/src/cdk-experimental/column-resize/resizable.ts +++ b/src/cdk-experimental/column-resize/resizable.ts @@ -19,7 +19,7 @@ import { ViewContainerRef, ChangeDetectorRef, afterNextRender, - runInInjectionContext + runInInjectionContext, } from '@angular/core'; import {Directionality} from '@angular/cdk/bidi'; import {ComponentPortal} from '@angular/cdk/portal'; @@ -289,8 +289,8 @@ export abstract class Resizable runInInjectionContext(this.injector, () => { afterNextRender({ write: () => { - this.overlayRef!.updateSize({ height: this.elementRef.nativeElement!.offsetHeight }); - } + this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight}); + }, }); }); }