As soon as people started to get into Ajaxification there was a shout out that we we do not have the throbber in the browser getting all jiggy, so we need a way to tell our users that we are doing stuff.
Quickly, people starting to use “Loading…” messages such as the red message in the top right of Gmail, or the middle potion message in Reader, and then of course the Ajax indicators where we got to feel all Knight Rider and channel Kitt.
Although it is great to tell your users what is going on, I have recently been getting a little frustrated at the loading messages, especially when I see 5 of them on a screen at the same time. This happens when various portals and widgets are asynchronously going after their data.
What often irks me is that the loading message shows up immediately, but for a barely percievable amount of time. It would actually be nicer if nothing appeared there, as the content came in, which seems like, as fast as a normal render process.
Users are used to pages rending as you go down, so if you are pretty sure that your content will come in quickly enough, why bother showing ‘Loading’ for a micro second.
To be safe, you could do some magic that does the following:
- You start by showing nothing
- If the content isn’t updated in half a second say, THEN add the “Loading…” message, as it is taking some time to get it
The end result is that most of the time you never see loading, and the user has no idea that content is coming in via Ajax.
DelayLoader
I quickly implemented a JavaScript class that does this for you.
You can see it at delayloadingmessage.
That page shows the delay in Loading… coming in. For many cases it doesn’t make sense, for some it may.
If I just want to wait for a bit of time (in case the content comes in already) I can just:
var delayLoader = new DelayLoader(5); // seconds
or if I want to be smarter and check to see if new content has come in yet:
var delayLoader = new DelayLoader({ contentChecker: function() {
return ($("results").innerHTML == '');} });