Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] position: absolute for rows to avoid repaint #12399

Open
oliviertassinari opened this issue Mar 10, 2024 · 1 comment
Open

[data grid] position: absolute for rows to avoid repaint #12399

oliviertassinari opened this issue Mar 10, 2024 · 1 comment
Labels
component: data grid This is the name of the generic UI component, not the React module! performance priority: low To delay as much as possible

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 10, 2024

Summary

This is a follow-up on #11866 (comment). See point 3 there. There seems to be a simple opportunity to increase performance by about 5% (30ms out of 700ms).

Today the virtualization layout looks like this:

SCR-20240310-pahi

So each time we add or remove a row at the top of the list, we have to repaint.

Instead, we could use position: absolute (while keeping the transform)

Motivation

Performance. Now, it seems to be only a hard 5% win, so not a priority.

The main win might be more about the green repaint flash that could feel like a red flag 🚩 by developers that stays on the surface of things, so more of a marketing value.

Screen.Recording.2024-02-26.at.02.27.30.mov

I think something to prioritize only when we seek quick wins or when someone complains about performance.

Search keywords: -

@oliviertassinari oliviertassinari added performance component: data grid This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 10, 2024
@oliviertassinari oliviertassinari added the priority: low To delay as much as possible label Mar 10, 2024
@romgrk
Copy link
Contributor

romgrk commented Mar 10, 2024

@cherniavskii Pointed out in #12023 that position: absolute makes dynamic 'auto' row height UX less smooth, because we need one render before knowing the real position where to place rows.

@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 11, 2024
@cherniavskii cherniavskii changed the title [data grid] position: absolute for rows to avoid repain [data grid] position: absolute for rows to avoid repaint Mar 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! performance priority: low To delay as much as possible
Projects
None yet
Development

No branches or pull requests

3 participants