Skip to content

Commit 590b58c

Browse files
committed
perf(cdk-experimental/column-resize): add debounce to column header hover to prevent excessive handler rendering
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.
1 parent ba5cf3d commit 590b58c

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

Diff for: src/cdk-experimental/column-resize/event-dispatcher.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {Injectable, NgZone, inject} from '@angular/core';
1010
import {combineLatest, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs';
11-
import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators';
11+
import {distinctUntilChanged, map, share, skip, startWith, debounceTime} from 'rxjs/operators';
1212

1313
import {_closest} from '../popover-edit';
1414

@@ -33,7 +33,7 @@ export class HeaderRowEventDispatcher {
3333
readonly overlayHandleActiveForCell = new Subject<Element | null>();
3434

3535
/** Distinct and shared version of headerCellHovered. */
36-
readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());
36+
readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), debounceTime(300), share());
3737

3838
/**
3939
* Emits the header that is currently hovered or hosting an active resize event (with active

0 commit comments

Comments
 (0)