Fork us on GitHub

Using Component Placeholders While Loading Data

New progress animations to use while your data is loading
Using Component Placeholders While Loading Data

Using Component Placeholders While Loading Data

In my last post I introduced the new CN.invokeWithoutBlocking() method as a means of ensuring that your UI construction code doesn’t run into any "blocking" that could negatively affect user experience. In cases where you need to perform a network request to help build your UI, I offered some recommendations for moving blocking code out of the critical paths. One recommended pattern was to insert placeholder content into your components, which you replace with the actual data once it has been received from the server. That pattern goes something like:

Form f = new Form("Hello", BoxLayout.y());
Label nameLabel = new Label();
nameLabel.setText("placeholder");
AsyncResource<MyData> request = fetchDataAsync();
request.ready(data -> {
    nameLabel.setText(data.getName());
    f.revalidateWithAnimationSafety();
});
f.add(nameLabel);
f.show();

The concept here is that, the fetchDataAsync() method is performing an asynchronous network request in the background but returns an AsyncResource object immediately which will be notified when the response if received. Therefore, the contents of the ready( data → {…​}) block are executed some time after the form has already been built and shown.

This solved a significant user experience problem, in that the form can be shown to the user immediately without waiting for the network request to complete. However, it introduced a new problem, which is that our nameLabel is displaying placeholder text for some period of time before it is replaced with the actual data.

To help solve this problem, I have added some new progress animations that are specifically designed to be used as placeholders while a component’s data is being loaded. These animations include methods for easily swapping themselves with other components while they are loading, and then seamlessly swapping back once the component is finished loading. Currently there are two ProgressAnimation classes:

  1. CircleProgress - A circle that progressively draws itself then erases itself. This is a variation on the classic infinite progress animation, but it is more flexible than the built-in InfiniteProgress class.

  2. LoadingTextAnimation - This animation appears to be a paragraph of text that is being typed progressively one word at a time - except instead of words, it just renders filled rectangles. This is useful for indicating that a block of text is loading.

Example using CircleProgress

Form f = new Form("Hello", new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER_ABSOLUTE));
Form prev = CN.getCurrentForm();
Toolbar tb = new Toolbar();
f.setToolbar(tb);
tb.addCommandToLeftBar("Back", null, evt->{
    prev.showBack();
});
Label nameLabel = new Label();
$(nameLabel).setAlignment(CENTER);
nameLabel.setText("placeholder");
f.add(BorderLayout.CENTER, nameLabel);
// Replace the label by a CircleProgress to indicate that it is loading.
CircleProgress.markComponentLoading(nameLabel)
        .getStyle().setFgColor(0xff0000);

AsyncResource<MyData> request = fetchDataAsync();
request.ready(data -> {
    nameLabel.setText(data.getName());

    // Replace the progress with the nameLabel now that
    // it is ready, using a fade transition
    CircleProgress.markComponentReady(nameLabel, CommonTransitions.createFade(300));
});

f.show();

And the result looks like:

Example Using LoadingTextAnimation

Form f = new Form("Hello", new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE));
Form prev = CN.getCurrentForm();
Toolbar tb = new Toolbar();
f.setToolbar(tb);
tb.addCommandToLeftBar("Back", null, evt->{
    prev.showBack();
});
SpanLabel profileText = new SpanLabel();

profileText.setText("placeholder");
f.add(BorderLayout.CENTER, profileText);
// Replace the label by a CircleProgress to indicate that it is loading.
LoadingTextAnimation.markComponentLoading(profileText);

AsyncResource<MyData> request = fetchDataAsync();
request.ready(data -> {
    profileText.setText(data.getProfileText());

    // Replace the progress with the nameLabel now that
    // it is ready, using a fade transition
    LoadingTextAnimation.markComponentReady(profileText, CommonTransitions.createFade(300));
});

f.show();

And the result looks like:

Share this Post:

Posted by Steve Hannah

Steve writes software for Codename One. He is an open source enthusiast who loves to tinker with new technologies.