perf(cdk-experimental/column-resize): improve hover responsiveness of… (#30708)

* 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.

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

use afterNextRender write phase instead

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

---------

Co-authored-by: Miles Malerba <[email protected]>

Author: danielolaru91

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,7 +286,13 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   private _updateOverlayHandleHeight() {
-    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 {