perf(cdk-experimental/column-resize): improve hover responsiveness of column resize with requestAnimationFrame

danielolaru91 · danielolaru91 · commit af3aa882c221 · 2025-03-25T16:09:53.000+02:00
diff --git a/src/cdk-experimental/column-resize/resizable.ts b/src/cdk-experimental/column-resize/resizable.ts
@@ -284,7 +284,9 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   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 {

Original file line number	Diff line number	Diff line change
`@@ -284,7 +284,9 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`private _updateOverlayHandleHeight() {`
`287`		`- this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight});`
	`287`	`+ requestAnimationFrame(() => {`
	`288`	`+ this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight});`
	`289`	`+ })`
`288`	`290`	`}`
`289`	`291`
`290`	`292`	`private _applySize(sizeInPixels: number, previousSize?: number): void {`