High CPU usage when Grid page size is set to a large value

[pepijnve]

Description

Setting the page size of a Grid to a very large value can lead to browser side hangs even if the data provider does not contain many items.

Expected outcome

I would expect the performance of the Grid to be proportional to the actual number of items in the data provider rather than the potential number of items in a page.

Minimal reproducible example

Grid g = new Grid();
... add a data provider with a small number of items
g.setAllRowsVisible(true);
g.setPageSize(Integer.MAX_VALUE / 10);

Steps to reproduce

Add the above snippet to a view

I'm not sure what the requirement is to trigger the code path, but you want to reach line https://github.com/vaadin/flow-components/blob/main/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.ts#L513 with items being undefined.

This will cause an empty Array to be created of size pageSize which then needs to be iterated over. If pageSize is some huge value this will cause the browser event loop to hang for a while.

Environment

Vaadin version(s): 24.4.11
OS: macOS

Browsers

Issue is not browser related

[vursen]

Hello @pepijnve!

I've tried to reproduce the issue using the following snippet (based on your example):

Grid<String> grid = new Grid<>();
grid.addColumn(item -> item);
grid.setItems("Item 1", "Item 2", "Item 3");
grid.setAllRowsVisible(true);
grid.setPageSize(Integer.MAX_VALUE / 10);
add(grid);

However, this snippet doesn't trigger the mentioned code path, which you stated is necessary for reproduction:

Screen.Recording.2024-09-30.at.12.09.41.mov

As a result, the issue wasn't reproducible. Could you provide a full example?

[pepijnve]

There must be something else in the data provider we're using in our app that triggers that code path then. I'll try to come up with a proper reproduction example.