Grid taking an abnormal amount of time to become visible

Question

We have a Grid with 50 to 66 columns. For some reason, when I call grid.setVisible(true) , it takes a little bit to show the grid and refresh things. In fact, my boss noticed it because there is literally a 5+ second wait for even the blue line at top, let alone the full display of the Grid . The less columns we have, the quicker it is. As a comparison, I have another Grid with 23 columns that is instantaneous, so quick we don't even see the blue line at the top. Same with a Grid of 33 columns. So my question is this: how can I improve the performance of grid.setVisible(true) ? Even showing the blue line at top sooner, as early as possible, would help some.

Displaying the blue line sooner would help, but ideally we would make the user experience better, somehow improve the performance. So any ideas would be appreciated.

One idea for showing blue line quicker can be found here , and I will definitely try it. But ultimately I think it would be better to improve the performance, thus my question.

NOTE: I know this is entirely at frontend (Vaadin code) because it even happens when I am testing in Eclipse, which is not talking to the DB or web services at all, and is just loading fake static data from an XML file. Also, it is not getting new data or loading new data into the Grid , it is just calling grid.setVisible(true) .

NOTE: blue line at top is the normal Vaadin 7 loading data line, and is NOT custom code at all. I don't even know how to control that blue line, it is totally automatic from my perspective. It normally displays when the server is sending information to the browser, as far as I can see.

On old Vaadin Forum, we also have this . I totally forgot about it. Their, @Olli Tietäväinen says to not do "setVisible", but to use CSS. Maybe someone else has a better idea, though.

Answer 1

In Vaadin 7 and Vaadin 8 by default Grid is automatically calculating column widths by using headers and snapshot of the first visible rows of data. This is O(n * m) process, where n is amount of columns and m number of visible rows. As column count increases, the process takes increasingly more time. The best way to make Grid rendering faster when you have lot of columns is to use predefined column widths using Grid.Column#setWidth(double) .

The automatic column width calculation will skip columns that have predefined width, thus making process considerably faster. Also, verify that you are using Vaadin 7.7.17, as there was performance improving patch included in the latest versions. See comparison table below.

If you want to hide Grid using css, just do this to toggle a classname

grid.addStyleName("grid-hidden");

remove

grid.removeStyleName("grid-hidden");

And add the following in your theme scss file.

.grid-hidden {
  display: none;
}