TreeGrid takes long time and freezes browser when using all rows visible and expanding everything

[stefanuebe]

Description

A customer wants to use the tree grid to display a set of hierarchical items (roughly 500 rows in total). The items shall be shown expanded and all rows shall be visible, so that the created table rows can be used on the client side (they want to show "connections" between two grids using a canvas).

The problem is now, that loading that tree grid takes roughly 6-10 seconds and freezes the tab in that time completely. Sometimes the browser asks, if the script shall be stopped.

Expected outcome

That it might take a bit of time to load all rows is ok, but compared to the normal grid, where showing all rows takes < 1 second, the current state is not acceptable.

Using an in memory data prover approach on the server side, we would like to have a similar loading time for the tree grid.

Minimal reproducible example

public class TreeGridView extends VerticalLayout {

    // build some hierarchical data, that can be taken for the tree grid
    public static final List<SampleComplexData> ITEMS = SampleComplexData.factory().createRecursive(20, 2, 5);
    private final TreeGrid<SampleComplexData> grid;
    private boolean expanded;
    private boolean expandedAll;

    public TreeGridView() {
        setSizeFull();
        setDefaultHorizontalComponentAlignment(Alignment.STRETCH);

        grid = new TreeGrid<>(SampleComplexData.class);

        grid.removeAllColumns();
        grid.addHierarchyColumn(SampleComplexData::getName).setHeader("Name");

        grid.setItems(ITEMS, SampleComplexData::getChildren);
        grid.setAllRowsVisible(true);

        grid.setSelectionMode(Grid.SelectionMode.NONE);
        grid.addThemeVariants(GridVariant.LUMO_NO_ROW_BORDERS);

        Button button = new Button("Expand All", event -> {
            if (expandedAll) {
                grid.collapseRecursively(ITEMS, 5);
                event.getSource().setText("Expand All");
            } else {
                grid.expandRecursively(ITEMS, 5);
                event.getSource().setText("Collapse All");
            }

            expandedAll = !expandedAll;
        });

        // expand all initially
        button.click();

        add(new HorizontalLayout(
                new Button("Expand First", event -> {
                    if (expanded) {
                        grid.collapse(ITEMS.get(0));
                        event.getSource().setText("Expand First");
                    } else {
                        grid.expand(ITEMS.get(0));
                        event.getSource().setText("Collapse First");
                    }

                    expanded = !expanded;
                }),
                button));
        Scroller scroller = new Scroller(grid);
        add(scroller);
    }

}

Steps to reproduce

1. Download the starter
2. Create hierarchical data
3. Apply that data to the TreeGrid, use all rows visible and expand the data (either before attaching or later using a button or so)
4. Wait

Environment

Vaadin version(s): 23.3.1

Browsers

Chrome

[vursen]

Hey! Could you please check if the issue has been resolved by https://github.com/vaadin/flow-components/pull/5916?

[stefanuebe]

Nope, still not working. See the attached video. As soon as the grid appears I try to select rows. It takes a long time until the selection is working (despite some short period of time in the beginning, where the page still is reactive). At that time also a loadbar appears again and the scrollbar gets resized, so there seems to be some additional loading.

Selecting rows is just to make it more clear visually. The page itself is still not reacting, buttons are not showing hover effects, you cannot scroll, etc.

Tested it with 24.3.3 and 24.4.0.alpha2.

https://github.com/vaadin/flow-components/assets/36725474/51f437db-2edd-4d72-bd48-d9daea4da5be