[DataGrid] Flickering on grid initialization when using flex columns

[hoangbn]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When the table is first rendered, flex columns have some small fixed width, then they expand. This happens very quickly, so it looks like it flickers.
The following gif shows the difference between navigating between 2 different tables (4.0.1 vs 5.0.1). The flickering one is v5

Expected behavior 🤔

It should not flicker (it did not do this before I migrated to v5 - 4.0.1)

Steps to reproduce 🕹

The issue can be viewed in the official example sandbox https://codesandbox.io/s/3q8ue?file=/demo.js taken from https://mui.com/components/data-grid/columns/#fluid-width

Steps:

1. Reload the sandbox render area
2. See it flicker

Context 🔦

No response

Your environment 🌎

No response

Order ID 💳 (optional)

No response

[flaviendelangle]

An example in the version 5.0.0-beta.7 without the flickering
https://codesandbox.io/s/columnfluidwidthgrid-material-demo-forked-bvyg6?file=/package.json

I will have a look 👍 , it was probably introduced by #3007

[flaviendelangle]

We are debouncing the resize event to avoid resizing the grid dozens of time when resizing the window.

But debouncing even the 1st resize event mean that the initialization is debounced, causing a render to squeeze between the column init without there flex size (to now if we need a scrollbar) and there update with there flex size.

[ddolcimascolo]

Can this be related to my issue in #2945 ?

[flaviendelangle]

At first glance I don't think so but it's not impossible

[ddolcimascolo]

OK. Cause I do see the flicker too

[flaviendelangle]

The flicker probably have the same cause