[data grid] Flickering on tab / panel change for data grid when using flex columns

[aleakos]

Steps to reproduce

Link to live example: (required)

Code sandbox of the issue here:

https://codesandbox.io/p/sandbox/columnfluidwidthgrid-material-demo-forked-wf2v7j?file=%2FTabComponent.js%3A62%2C53

The top panel shows how it should look. It seems to be working since the component is mounted, and this issue seems to be fixed on initial mount: https://github.com/mui/mui-x/pull/3213/files

Steps:

1. Change tabs
2. See flicker in the second grid

Current behavior

When I switch tabs with flex columns, they start small and then expand. This doesn't happen on mount, but does happen when i switch tabs.

Expected behavior

No flickering / tab size should stay

Context

We have a page that is decently heavy (lots of charts etc, not just data grids), so we don't want to have to resort to mounting the content to resolve the flickering.

This seems related to #3213, and looks like it was fixed on initial load

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.4 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 18.19.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.10.8 => 11.10.8 
    @emotion/styled: 11.10.8 => 11.10.8 
    @mui/base:  5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.13.7 
    @mui/lab: 5.0.0-alpha.128 => 5.0.0-alpha.128 
    @mui/material: 5.12.2 => 5.12.2 
    @mui/private-theming:  5.13.7 
    @mui/styled-engine:  5.13.2 
    @mui/system: 5.12.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.7 
    @mui/x-data-grid: ^6.16.3 => 6.16.3 
    @mui/x-data-grid-generator: ^6.10.2 => 6.10.2 
    @mui/x-data-grid-premium: ^6.16.3 => 6.16.3 
    @mui/x-data-grid-pro:  6.16.3 
    @mui/x-license-pro:  6.10.2 
    @types/react: 18.2.0 => 18.2.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.0.4 => 5.0.4 

Search keywords: flickering grid datagrid flex

[michelengelen]

Hey @romgrk ... could you have a look? Or ideally know from the top of your head why that flicker happens? Thanks! 🙇🏼

[romgrk]

The hidden HTML attribute prevents rendering at the browser level but doesn't make the actual component "unmounted" from react's POV, so we don't debounce the initial resize but toggling hidden on its parent doesn't re-mount it, therefore the resize is debounced.

Check here, only the first panel "PanelHidden" flickers now, and not the second one "PanelNotMounted": https://codesandbox.io/p/sandbox/columnfluidwidthgrid-material-demo-forked-jl4vn5?file=%2FTabComponent.js%3A72%2C32

[walker0643]

This has been an ongoing issue for me as well. Correctly fixing the issue inside mui-x would be ideal, but I would certainly welcome a workaround in the meantime if anyone has one.

My gratitude to everyone for all of the hard work.

[aleakos]

This has been an ongoing issue for me as well. Correctly fixing the issue inside mui-x would be ideal, but I would certainly welcome a workaround in the meantime if anyone has one.

My gratitude to everyone for all of the hard work.

my current solution was to just update the key for the DataGrid component based on a tab change, forcing the component to unmount. the DataGrid rendering is fast enough that its not an issue for me, its my other charts that i wanted to avoid re rendering.

unfortunately, @romgrk's solution doesn't quite work for me as i'm trying to avoid mounting/unmounting the entire Demo on every tab change

[romgrk]

Have you tried using styling instead of the HTML hidden attribute? By the way, the spec seems to discourage the use you're making of it:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

https://html.spec.whatwg.org/#the-hidden-attribute

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.