How to create a splash screen while GWT loads
Posted by David Chandler on October 13, 2009
GWT apps can take a while to present the initial view, so we’ll create a splash screen to create the appearance of progress while the app loads. This concept works with any Web framework, but we’ll apply it specifically to GWT.
The basic idea is to create a splash DIV in the HTML page that hosts the GWT app, then make that DIV invisible once the GWT app is loaded.
First, we need our splash DIV. For the graphic, I’m using an animated GIF generated using the handy site in my previous post. Simply add a DIV in your index.html page that hosts the GWT app:
<div id="loading"> Loading<BR/> <img src="../images/splash.gif" /> </div>
Put a corresponding snippet in your CSS file to center the DIV on the page. This is easily done with absolute positioning and a negative margin. If your splash image is 200 pixels wide, use a left margin of -100 to center it horizontally.
#loading { display: block; position: absolute; top: 50%; left: 50%; text-align: center; margin-left: -100px; }
Now all we have to do is remove the splash DIV once GWT has finished loading. All you need is one line in your GWT EntryPoint class at the end of onModuleLoad():
public void onModuleLoad() { ... DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading")); }
For good measure, you may also want to hide the DIV containing GWT while it loads. This can be done with a couple additional lines:
// Set GWT container invisible DOM.setStyleAttribute(RootPanel.get("gwt-container").getElement(), "display", "none"); // Load the app--this example uses gwt-presenter appPresenter.go(RootPanel.get("gwt-container")); DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading")); // Set GWT container visible DOM.setStyleAttribute(RootPanel.get("gwt-container").getElement(), "display", "block");
Tomorrow: how to create a “working…” pop-up within GWT while gwt-presenter is waiting for service callbacks, etc.
Raney said
Hello David,
I found this suggestion for a gwt splash in my travels.
It is just what I would like, simple just a little something.
I am trying to use a generic rotating image for the display.
Loading Application…
<IMG SRC = "/Include/Image.Loading.gif"
The image displays and then stops rotating until the scripts load and the onModuleLoad is actually called.
Am I missing something?
Thanks,
Raney
Eduardo said
Yeah same issue here, animated gif stops while script is loading. Any suggestion?
David Chandler said
I often see the animation stop, too. It likely means the browser is too busy loading JS to spin the image. It usually works better for me in production mode than dev mode because there’s not as much setup overhead.
Sono G. de M said
same for me, the gif animates up to a point, and then it hangs. JS is single threaded, after all, could it be that in chrome, for example, the browser only allocates processing time for actions such as spinning a gif when the “main” thread gets freed up from loading the main module js?
Raney said
Hello David,
Not yet.
I have seen a couple of ideas creating a Button or Dialog with script, just does not make any sense.
I will keep trying, I would like to make it simple before I try to get fancy.
I have found many of your examples very helpful.
Most of the documentation on Google is not very helpful, just says things like a gaget is a gaget.
I will keep you informed.
Have a good day,
Raney
Helen said
Hi David,
This is just what I need, and it works like a dream in IE.
However, it seems that Firefox doesn’t play so nicely, and does not show the HTML page until the GWT app has loaded. Is this an issue that you’ve come across?
Thanks,
Helen
David Chandler said
Thanks, Helen. One suggestion I’ve seen is to move the script src=”…nocache.js” tag to the bottom of the page, just before the closing body tag.
Helen said
Thanks very much David, this has certainly improved the situation. I am now able to see the loading div, although not always. Sometimes, it remains unshown. This is now clearly a caching issue and it’s a tricky one!
shreyas said
This is good stuff. Thanks David!
Joshua said
Thanks – great post!
Josue Pirir 200611089 said
Thaks – just that I search
David said
FYI, The CSS for centering the div is missing a `margin-top: -100px` (if the picture is 200px high) in order to center it vertically as well as horizontally
Faissal Graviton said
Hi,
Where do you put the GIF file ?
Thanks
David Chandler said
Wherever your IMG tag points to. The webapp folder is the usual place for static resources in GWT.