How to show a loading indicator while rendering complex content on client?

Vaadin 6 / 7 / 8 Framework UI
1

hi guys,

when switching the main view of my vaadin application, a lot of content has to be replaced. while the server side processing is done within 100ms, the client takes between 500ms (Safari/Chrome) and 4000ms (IE/FF) to render the changes after receiving it from the server. during this time i would like to show a loading indicator gif (if possible with a customized message) to the user.

i tested the LazyLoadWrapper as well as the TFTLazyLayout add-on. both of them didn’t fit my needs and led to “out of sync” very soon (when switching to another main view while the previous is not yet displayed). now i am trying to build a very simple client side component that does what i want. the basic idea behind it is the following:

public class VLoadingIndicatorPanel extends VCssLayout {

    private final Element load;

    public VLoadingIndicatorPanel() {
        this.load = DOM.createDiv();
        this.load.setInnerText("Loading...");
        this.load.setClassName("showmypanel");
        getElement().appendChild(this.load);
    }

    @Override
    public void updateFromUIDL(final UIDL uidl, final ApplicationConnection client) {
        this.load.setClassName("showmypanel");
        Window.alert("Server finished!");
        final long before = new Date().getTime();
        super.updateFromUIDL(uidl, client);
        final long after = new Date().getTime();
        Window.alert("Rendering time: " + (after - before));
        this.load.setClassName("hidemypanel");
    }

}

problem: i’ve got no experience in GWT…

after clicking a button that switches to another main view, the alert message “Server finished!” shows up almost immediately and i can see my loading indicator. after a while (0.5s - 4s) the alert message with the rendering time shows up. confirming it hides the loading indicator. so far so good. but when removing the alert statements the loading indicator is not shown at all. somehow it seems that the setClassName(“showmypanel”) only affects the DOM immediately because of the alerts.

  1. how can i ensure that the “showmypanel” style is effectively set before calling super.updateFromUIDL(uidl, client)
  2. is the basic principle of such a component ok? are there any better ways to achieve my goals?
  3. is there any other add-on which i don’t know of that solves my needs in a better way?

thank you,
stephan

ps: simplifing my overall layout is something that i will do some time later.

2

The rendering of the UI happens in one thread, and all browsers optimize that rendering so that mostly all DOM updates happen simultaneously, hence the loading indicator never showing (since “hidemypanel” stylename is applied last).

The alert dialogs effectively also interrupt the rendering thread, and the browser is forced to render all changes up to that alert. The alert creates a break in the rendering thread, allowing other browser actions to happen.

So you need to break the rendering thread with another mechanishm than alert dialog. And that is setTimeout (in JavaScript speak). In GWT that break can be created with DeferredCommand. In GWT 2.1 that will be deprecated in favor of ScheduledCommand. Look those up, and ask more info if you have trouble :slight_smile:

3

Thank you Jouni (again) for your response.

Makes sense. I was expecting something like that.
I’ll look up your hints during the weekend.

Cheers,
Stephan

4

maybe this will help… http://vaadin.com/directory/#addon/toolkit-productivity-tools

  • Built-in wrapper for lazy loading or long initializing views or components, easily letting developer to avoid client browser stucks and red wheel of death :wink:
5

Also see
LazyLoadingWrapper
.