David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 224 other subscribers
  • Sleepless Nights…

    October 2009
    S M T W T F S
  • Blog Stats

    • 1,040,366 hits

How to show a “Loading…” pop-up in your GWT app

Posted by David Chandler on October 22, 2009

Last week, I posted a technique for displaying a splash screen before GWT loads. In this post, we’ll look at a way to show a modal pop-up after your app is up and running, but while GWT is making AJAX calls.

The basic idea is to show and center a pop-up with some text and an Ajax wait image. There are a couple ways to hook it into gwt-presenter. The WidgetDisplay interface method has startProcessing() and stopProcessing() methods that get called by the DisplayCallback class that you pass to dispatch.execute(). If you want to show the pop-up for only one presenter, then you can simply implement these methods in your view. More likely, however, a centered pop-up will be used by multiple presenters, in which case we can create an AppLoadingPresenter and AppLoadingView that will listen for an AppLoadingEvent. Any presenter or service can then fire the AppLoadingEvent to cause the “Loading…” panel to be shown. Here’s some very elegant code courtesy of my co-worker Tony Richardson. I’ll leave it up to you to create the AppLoadingEvent and fire where you need it. One more note: I’m reusing the AppLoadingEvent to trigger both showing and hiding the pop-up by means of a boolean argument in the AppLoadingEvent constructor. It might be more correct to use separate events for this, but it’s getting late…

package com.roa.client.presenter;

import java.util.List;

import net.customware.gwt.presenter.client.EventBus;
import net.customware.gwt.presenter.client.place.Place;
import net.customware.gwt.presenter.client.widget.WidgetDisplay;
import net.customware.gwt.presenter.client.widget.WidgetPresenter;

import com.google.inject.Inject;
import com.roa.client.event.AppLoadingEvent;
import com.roa.client.handler.AppLoadingEventHandler;

public final class AppLoadingPresenter extends
    public interface Display extends WidgetDisplay
        void showWidget();

    private final Display display;
    private final EventBus eventBus;

    public AppLoadingPresenter(Display display, EventBus eventBus)
        super(display, eventBus);
        this.display = display;
        this.eventBus = eventBus;

    public Place getPlace()
        // We won't really use this presenter as a Place
        return null;

    public void hideLoading()

    protected void onBind()
        registerHandler(this.eventBus.addHandler(AppLoadingEvent.TYPE, new AppLoadingEventHandler()
			public void onAppLoadingEvent(boolean isComplete)
				if (isComplete)

    public void revealDisplay()

And here’s the AppLoadingView. Very simple, but cool effect.

package com.roa.client.ui.web;

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasText;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;
import com.roa.client.presenter.AppLoadingPresenter.Display;

public final class AppLoadingView extends PopupPanel implements Display
    private final FlowPanel container = new FlowPanel();

    public AppLoadingView()
        final Image ajaxImage = new Image("path_to_ajax_wait_image");
        final Grid grid = new Grid(1, 2);  
        grid.setWidget(0, 0, ajaxImage);
        grid.setText(0, 1, "Loading...");    

    public Widget asWidget()
        return this;

    public void stopProcessing()

    public void startProcessing()

    public void showWidget()

6 Responses to “How to show a “Loading…” pop-up in your GWT app”

  1. Subhro said

    Your post helped a lot. Though I am not using gwt-presenter, i am implementing MVP as given in the article “Building large scale application in GWT” in the google docs for GWT.(home grown solution!!).

    Thanks again.

  2. Steff said

    Is there a small example how to use this snippet?
    Create EventBus, fire event, etc?

  3. Keywords said


    […]How to show a “Loading…” pop-up in your GWT app « TurboManage[…]…

  4. sonam said

    Hey David,
    I am using your code but when i have an operation like ‘loading a table ‘ the screen frizzes essentially the loading image too.It kinda ruins the whole purpose .Any clues?

    • When the browser is really busy loading JS or rendering, there’s not much that can be done to prevent freezing. In general, the fewer things you try to do at once, the better, so you could try GWT code splitting or loading a smaller set of data initially.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: