[grid] Initial flickering with 40 columns when using material theme

[Manojms1997]

Hi,

Description

We tried vaadin-grid with imported material style, we could see vaadin-grid gets rendered using material style. There is an initial flickering with vaadin-grid when we use material theme as shown below.

Expected outcome

We should not have flickering when using material theme. i.e. vaadin-grid initial load should works similar to default lumo style.

Actual outcome

There is an initial flickering with vaadin-grid when we use material theme.

Steps to reproduce

1. Create Angular application
2. Add vaadin-grid element to the app.component template.

   vaadin-grid [items]="randomBigData.tree">
   <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
   <vaadin-grid-column resizable path="last_name" header="Surname"></vaadin-grid-column>
   <vaadin-grid-column resizable path="email" header="email"></vaadin-grid-column>
   <vaadin-grid-column resizable path="gender" header="gender"></vaadin-grid-column>
   <vaadin-grid-column resizable path="ip_address" header="ip_address"></vaadin-grid-column>
   <vaadin-grid-column resizable path="animal_name" header="animal_name"></vaadin-grid-column>
   <vaadin-grid-column resizable path="ein" header="ein"></vaadin-grid-column>
   </vaadin-grid>

3. impoterd material grid as below,

   import '@vaadin/vaadin-grid/theme/material/vaadin-grid.js';

4. On initial load Flickering is observed (flickering is observed even with Polymer applications). Flickering with vaadin-grid

Initial load performance from chrome diagnostics:

Here we could see additional Recalculation of styles happening,

We even tried importing material theme in the application level as explained here https://cdn.vaadin.com/vaadin-material-styles/1.3.2/demo/ Material style is not picked by vaadin-grid still lumo style grid is rendered.

Browsers Affected

• [X ] Chrome

It looks like the way we are importing material theme is not correct. What is the right way to import material theme at application start?

Regards Manoj

[tomivirkki]

Hi @Manojms1997 couldn't reproduce the flickering issue on my local environment (Polymer project) with the same setup you use for the <vaadin-grid>. Can you provide a minimal example project as a zip file so we can reproduce the issue?

You can alternatively remix and modify this live-example I changed to import the grid with Material theme: https://glitch.com/edit/#!/amazing-laugh-ct3fikayw

[Manojms1997]

Hi @tomivirkki ,

I modified the sample you shared with the data I am using here, main difference is I am using data with 40 columns and 5000 rows. https://glitch.com/edit/#!/join/f02a939f-a311-460e-881d-1fd84d0f8b23

With the modified sample also I could reproduce the issue of style recalculation. Below sharing the performance timeline showing additional style calculation from Chrome please have a look.

Also sharing the Angular app sample which we are using for performance testing Vaadin-Grid.zip

We are changing style to material by adding import '@vaadin/vaadin-grid/theme/material/vaadin-grid.js'; in app.component.ts instead of import '@vaadin/vaadin-grid';

Thanks Manoj