Showing “in progress” in a full AJAX application when we don't know where the new content will be placed

Question

I am building a web application that is fully AJAX enabled. Clicking a link will load the page from the server and some tricky javascript will determine which parts of the page will require replacing. It will then fade out the old parts and fade in the new parts.

It works well, but the above can only happen after we receive the content from the server, so the following cannot be used:

• Blanking or fading the content to be replaced.
• Showing throbber in place of where the new content is to be placed.

I am looking for a generic area to place a throbber or status indication to let the user know that the page is being loaded. The indicator should allow the user to know that something is happening, but should also be subtle and not get in the way.

In desktop applications, this is often indicated by changing the mouse cursor to a busy cursor. But in a web application, I don't think this would work well: When I see a busy cursor, it indicates to me that the page has crashed and the tab would have to be restarted.

Is there a subtle and elegant way to show the user that we are loading some data from the server without having to blank/fade out parts of the page that will be replaced?

Answer 1

A pattern I've seen (e.g.: Google mail) is to use a slide-down banner for this--a panel that slides down from the top middle of the viewport (not the page) with a "Loading..." message.

The animation catches the user's eye, and the fact that it's an overlay helps reinforce that you don't know what's going to change on this page.

You could also use the Twitter/Stack Overflow approach where you delay the redraw until the user clicks. "There are _ 2 _ new responses. _ Click here _ to show them."

Answer 2

One way to do this is to make the clicked item stand out. Maybe you can place an indication or marker next to the item which has been clicked to indicate that the user has started a process and should not be clicking on other links or buttons during that process.

However the user should be able to keep on reading on that page. So to put more focus on your problem, first try finding out whether the click action means "send me to the next page" or "im curious what this button does". Then you can conclude if your status message can fade the entire screen or if it should only put some sort of marker next to the button.