perf(cdk-experimental/column-resize): add debounce to column header hover to prevent excessive handler rendering (#30709)

Improve the user experience and performance of the `cdk-experimental` column resize feature by adding a `debounceTime` operator to the `headerCellHoveredDistinct` observable. Previously, the hover event triggered the handler immediately, which could result in unwanted handlers showing up when the user quickly moved their cursor over column headers. This change ensures that the handlers only appear if the user pauses (hovers for 300ms) over the column header, preventing handlers from rendering during fast cursor movements.

Author: danielolaru91

src/cdk-experimental/column-resize/event-dispatcher.ts

@@ -8,7 +8,7 @@
 
 import {Injectable, NgZone, inject} from '@angular/core';
 import {combineLatest, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs';
-import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators';
+import {distinctUntilChanged, map, share, skip, startWith, debounceTime} from 'rxjs/operators';
 
 import {_closest} from '../popover-edit';
 
@@ -33,7 +33,11 @@ export class HeaderRowEventDispatcher {
   readonly overlayHandleActiveForCell = new Subject<Element | null>();
 
   /** Distinct and shared version of headerCellHovered. */
-  readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());
+  readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(
+    distinctUntilChanged(),
+    debounceTime(200),
+    share(),
+  );
 
   /**
    * Emits the header that is currently hovered or hosting an active resize event (with active

src/material-experimental/column-resize/column-resize.spec.ts

@@ -9,7 +9,7 @@ import {
   Injectable,
   ViewChild,
 } from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, flush} from '@angular/core/testing';
+import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
 import {MatTableModule} from '@angular/material/table';
 import {BehaviorSubject, Observable, ReplaySubject} from 'rxjs';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
@@ -406,6 +406,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
 
         expect(
           component.getOverlayThumbElement(0).classList.contains('mat-column-resize-overlay-thumb'),
@@ -435,6 +436,7 @@ describe('Material Popover Edit', () => {
         component.completeResizeWithMouseInProgress(0);
         component.endHoverState();
         fixture.detectChanges();
+        tick(200);
         flush();
 
         expect(component.getOverlayThumbElement(0)).toBeUndefined();
@@ -448,6 +450,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
         component.beginColumnResizeWithMouse(1);
 
         const initialThumbPosition = component.getOverlayThumbPosition(1);
@@ -497,6 +500,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
         component.beginColumnResizeWithMouse(1);
 
         const initialThumbPosition = component.getOverlayThumbPosition(1);
@@ -532,6 +536,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
         component.beginColumnResizeWithMouse(1, 2);
 
         const initialPosition = component.getOverlayThumbPosition(1);
@@ -549,6 +554,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
         component.beginColumnResizeWithMouse(1);
 
         const initialThumbPosition = component.getOverlayThumbPosition(1);
@@ -586,6 +592,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
 
         expect(resize).toBe(null);
 
@@ -607,6 +614,7 @@ describe('Material Popover Edit', () => {
 
         component.triggerHoverState();
         fixture.detectChanges();
+        tick(200);
         component.beginColumnResizeWithMouse(0);
 
         component.updateResizeWithMouseInProgress(5);
@@ -669,6 +677,7 @@ describe('Material Popover Edit', () => {
 
       component.triggerHoverState();
       fixture.detectChanges();
+      tick(200);
 
       component.resizeColumnWithMouse(1, 5);
       fixture.detectChanges();
@@ -694,6 +703,7 @@ describe('Material Popover Edit', () => {
 
       component.triggerHoverState();
       fixture.detectChanges();
+      tick(200);
 
       component.resizeColumnWithMouse(1, 5);
       fixture.detectChanges();