Slow performance for view with multiple grids

If some grids (approx. 40) with only some items (5-20) are to be displayed on a view, then it takes a long time from the time when everything is run through on the server to the time when the grids are displayed in the browser. On the workstations and on the productive system up to approx. 45s (!). I have broken down the problem to the attached code. 2 places, which are important for the execution time, are the definition as MultiSelect and the column with the DownloadComponente, whereby the former has the larger influence on the necessary time. The issue occurred originally under Vaadin14, but could be reproduced in the current Vaadin24. The display of a grid with about 800 items was visible almost immediately, so it seems to be a problem with the display of many some grids. Here is an example of the code. (3.31 KB)

What kind of adjustments are possible to fasten such a view with multiple grids ?

Stop using addComponentColumn

And I’m not sure how large your object / dto is but if it contains bytes and other large objects combined with lomboks default equals/hashcode could also result in big slowness spikes. Grid / most components work with the hashcode and equals method of items - meaning those are executed quite often so it’s best to assign a single value / id to such dtos or provide / customizer the id method of the list data provider

If some grids (approx. 40) with only some items (5-20) are to be displayed on a view
Without knowing more about your application it is hard to comment this with absolute certainty, but for me it sounds like that Grid is not the right component choice here. Why so many in the same view? Is the view composition well thought, should it be re arranged? With only 5-20 items per Grid, there could be better choices of components to use. Grid is best suited for use cases where you want to display long list of data that is lazy loaded to browser for speed. This means that lazy loading mechanism etc. gives it some overheads per component.

Thanks to both for the recommendations. The addComponentColumn was responsible for 1/3 to 1/2 of the performance issue, the other one seems the multi-select-feature of the grid, which is a must have in order to fulfill the business requirements. Therefore, beside to build a kind-of-grid by myself, I do not see an alternative component showing some grouped content with multi select functionality. equalsand hashCode is another good point: usually I try to use java records due to the easy use as JOOQ projection target. Here, I should add custom implementations of hashCode() and equals() … I’ll try it by end of the week and report it here …

~~I experienced slow performance with component renderer on grid (with large data) too. I switched to LitRenderer and it came with a massive performance improvement which i wouldnt have expected in advance due to the simple markup (which was a new Div(“x”) before.

Anyway i doubt it will help you since i wouldnt expect it to be slow for just 5-20 items on the grid. Sharing anyway - maybe it helps.

String template = "<div class=\"${item.class}\" @click=\"${onClick}\">x</div>";
            Grid.Column<Map<Integer, MyObject>> column =
                    grid.addColumn(LitRenderer.<Map<Integer, MyObject>>of(template)
                            .withProperty("class", (Map<Integer, MyObject> values) -> getGridCellClass(values.get(columnNumber)))
                            .withFunction("onClick", (Map<Integer, MyObject> values) -> onClick(values.get(columnNumber))));

Reading your original post again, i am sure my comment is not helpful. Thus striking it.