Hi,
with Vaadin 14.1.5 I had a performance issue with some forms (which included between 20 and 120 input/output elements plus containing layouts, details components with vertical layouts in it, …).
Opening a form took between 2 and 10 seconds, depending on browser (Firefox/Chromium took less, IE/Edge took more time).
The Browsers showed that nearly all the time was consumed with rendering, even when all the details-components where closed.
This was the code to create the details with vertical layouts in it (already with just opening the first details component only):
Details details = new Details();
details.setSummaryText("details name "+detailsnumber);
details.setContent(verticalLayout);
details.setEnabled(true);
// Open the first and close all the others
details.setOpened(detailsnumber == 0);
verticalLayout.setVisible(detailsnumber == 0);
add(details);
detailsnumber++;
Reading https://vaadin.com/docs/v8/framework/articles/OptimizingSluggishUI.html I found one hint: “hide rarely used features (this also improves usability) when possible”.
So I added these lines and the loading time was reduced to ~ 0,5 seconds plus another 0,5-1 second for every detail component to open:
details.addOpenedChangeListener(new ComponentEventListener<Details.OpenedChangeEvent>() {
@Override
public void onComponentEvent(OpenedChangeEvent event) {verticalLayout.setVisible(event.isOpened());}
});
I think that it would be great to add this as a standard behaviour to the details component.
Maybe as a special lazy loading mode:
setLazyLoading(true);