Lazy load of components

Hi,
I am using AppLayout and drawer tab “Data” contains Grid with some data. Is there a simple way to display all other non-data UI components (NavBar tabs, Drawer tabs) without actually fetching the data for tab “Data”? The idea is that user should be able to work with other components immediately (not after waiting to fetch the data he/she does no need). Data should be fetched after “Data” tab is clicked.

I found some add-ons (eg. https://vaadin.com/directory/component/lazylayouts), it seems a bit outdated for Vaadin 14 (eg. need to implement com.vaadin.ui.Component). But I am very inexperienced with Vaadin.

Many thanks for any help

There is no similar add-on to LazyLayouts for Vaadin 14 yet. The closest and easiest thing you could try is to use single column Grid with ComponentRenderer, as new Grid supports variable row heights.

I see, thank you

You might also want to check out https://github.com/vaadin/vaadin-iron-list-flow

I usually fix this by adding an empty div as content on that heavy tab. And then listening for tab-change and switch out the empty div to the heavy grid on that click.

I have used RouterLinks connected with buttons in AppLayout. See attachment for details.

The button in main UiView reroutes user to Report.class view, which uses UiView.class as a RouterLayout parent, so all UI elements are still available.

No data is loaded until any button is clicked by user

17911321.png