Loading Notification for Web Apps

If you fooled around with some of the more complex Pyjamas examples, such as GChartTestApp, you probably noticed that they take quite a while to load. My apps too have been steadily growing in size and can take up to several seconds to load. It makes sense to inform the user that the app is loading and the browser is not frozen. One way to do so is by doing exactly what GChartTestApp does, displaying text that says “Please wait, the app is loading”. But since this is an app after all, I wanted something a bit more elegant than static test. At the same time, since the app is already large enough, I didn’t want to add any overhead to it by writing a new module for the loading screen. My solution was pretty simple, I decided to go find an animated .gif image that looks like a loading bar or an hour glass and slap it as background image in the middle of the screen. It uses no resources (aside from loading the image to begin with) and the best part is your app will load on top of it, hiding the image after the load completes (assuming your app background is not transparent).

First I decided to go find an image. What I found, however, was even better. http://ajaxload.info is a loading .gif generator that lets you choose a template and customize the color to fit your website. Then I wrote a quick body tag for my CSS stylesheet to setup the image properly:

body {
   height:100%;
   background-color: white;
   background:url(loading.gif) no-repeat center;
}

Height is necessary to make sure the image appears in the center of the screen, otherwise HTML defaults to height of zero and expands it as more content appears (since there is no content, the background image will appear at height of 0, with half of it cut off). If you’re using the standard CSS style sheets from examples, most apps don’t need more work than that, since the opaque background of the panels will hide the loading image. If you’ve picked one of the panels that don’t have a style sheet, or GWTCanvas/HTML5Canvas (which has transparent background by default), you can either create a new style sheet and assign it to the main panel, or use DOM to change the background of the panel without creating a style sheet:

DOM.setStyleAttribute(self.getElement(), "background", "white")

Now just place the loading image in your output directory and reload the page.

This entry was posted in Hacks and Tricks and tagged , by Alexander Tsepkov. Bookmark the permalink.

About Alexander Tsepkov

Founder and CEO of Pyjeon. He started out with C++, but switched to Python as his main programming language due to its clean syntax and productivity. He often uses other languages for his work as well, such as JavaScript, Perl, and RapydScript. His posts tend to cover user experience, design considerations, languages, web development, Linux environment, as well as challenges of running a start-up.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>