[data grid] Prevent row-hover from updating when scrolling (fast)

[lauri865]

Summary

When scrolling fast, the hovered row never manages to catch up with the cursor position, hence it will often lag behind, and creates a distracting UX + makes the datagrid looks less performant (plus the browser has to do unnecessary paint updates). Hence I suggest preventing the browser from updating row hover when scrolling fast.

Browser do this kind of optimization by default, as you can witness from here: https://mui.com/material-ui/react-table/#column-grouping

Although, it can take a second to update when stopping scrolling. I'd propose something in between those two.

I made a simple POC (can probably be improved a lot): https://codesandbox.io/p/sandbox/zealous-bardeen-fhcws9?file=%2Fsrc%2FDemo.tsx%3A98%2C1

• Prevents hover when scrolling fast, starts showing again roughly when your eyes can start reading the content (could probably be delayed even further)
• Shows hover instantly when scrolling ends up back at the top or bottom of the grid. The bottom one doesn't currently work with grouping (counting rows was not ideal performance-wise on each frame, but could maybe be done with dimensions instead, which should be cached).
• Still updates hover instantly when scrolling slowly (again, browsers don't do that, which gives the opposite effect, hence this middle ground approach)

Toggle the setting on and off and see what you prefer when scrolling fast.

Examples

No response

Motivation

No response

Search keywords: scroll hover

[michelengelen]

Interesting approach and looks nice! ... @mui/xgrid WDYT?

[michelengelen]

i'll add this to the board 👍🏼

[lauri865]

Great. An added bonus to this is that if you have tooltips, popovers, charts (with tooltips), etc. (we have all three) in the Datagrid that are interactive on hovering the cell then these get automatically optimised, as rendering overlays usually depends on getting the clientRect of the cell, which in turn can trigger a reflow, which will put a dent on scroll performance / CPU use.