Skip to main content

Infinite lazy loading

·269 words·2 mins
Vaadin
Alejandro Duarte
Author
Alejandro Duarte
Alejandro Duarte is a Software Engineer, published author, and Developer Relations Engineer at MariaDB. He has been programming computers since the mid-90s. Starting with BASIC, Alejandro transitioned to C, C++, and Java during his academic years at the National University of Colombia. He relocated first to the UK and then to Finland to foster his involvement in the open-source industry. Alejandro is a recognized figure in Java and MariaDB circles.

Here’s a short excerpt of Chapter 9 Lazy Loading of my book Data-Centric Applications with Vaadin 8.

Even though we have explained lazy loading by using the Grid component, we can use the same backend service method to implement custom UI components that support lazy loading. For example, you can use a VerticalLayout to add sets of, say, 10 components any time the user clicks a load more button at the bottom of the layout. In this case, you would need to keep track of the current offset and keep incrementing it until the service method returns less than 10 items.

The following is a simple UI component that shows how to implement this type of infinite lazy loading:

public class LazyLoadingVerticalLayout extends Composite {

    private CssLayout content = new CssLayout();
    private Button button = new Button("Load more...");
    private int offset;
    private int pageSize;

    public LazyLoadingVerticalLayout(int pageSize) {
        this.pageSize = pageSize;
        button.setStyleName(ValoTheme.BUTTON\_BORDERLESS\_COLORED);
        VerticalLayout mainLayout = new VerticalLayout(content, button);
        setCompositionRoot(mainLayout);

        button.addClickListener(e -> loadMore());
        loadMore();
    }

    public void loadMore() {
        List<Call> calls = CallRepository.find(
                offset, pageSize, "", new HashMap<>());

        if (calls.size() < pageSize) {
            button.setVisible(false);
        }

        calls.stream()
                .map(call -> new Label(call.toString()))
                .forEach(content::addComponent);

        offset += pageSize;
    }
}

Notice how the loadMore method keeps adding components to the content layout until there are no more results to add, at which point the Load more… button is hidden from the UI.

The following screenshot shows this component in action:

Infinite lazy loading example

_You can learn more about lazy loading and many other topics related to web development with Vaadin in my book Data-Centric Applications with Vaadin 8 _available at amazon.compacktpub.com, and many other online bookstores.

Enjoyed this post? I can help your team implement similar solutions—contact me to learn more.

Related

Hello, World in Vaadin 10+
·1243 words·6 mins
Vaadin
A guide to creating a Hello, World application using Vaadin 10+ and Java.
Data-Centric Applications with Vaadin 10?
·242 words·2 mins
Vaadin News
Migrating the examples from my Vaadin 8 book to Vaadin 10.
What's so cool about Vaadin Flow?
·341 words·2 mins
Vaadin
An overview of the features and benefits of Vaadin Flow for Java developers.