I am working on an Ajax loading filters for an e-commerce site. On the first page request we load the common html (header, footer, other common contents) as a part of first request and then make another Ajax request to load the filters and products with faceted search.

We have a very decent overlay with ajax loading icon displayed until the ajax request is processed and loaded into the dom.

This works fine for most cases. But however if request is taking a little longer, then this overlay stays for longer time.

I want to know the best approach for this?

Should we load an overlay with image and then remove it after ajax load content. Or Should we just load ajax content without an overlay.

What is good as far as UI is matter?

  • Could you please elaborate a bit: Is the overlay only used for read operations (no create/destroy/updates). Is this the only case you show the overlay? Am I correct to assume the overlay prevents users certain user actions? Do you need to prevent them from these actions?
    – Izhaki
    Jul 1, 2013 at 23:42
  • Yes, overlay is only used for read operations. Moreover, yes the overlay prevents user from performing any action. And we need to prevent them from performing any action. As it is a filter, so once they select a filter then the product list gets refreshed using Ajax. And until it is fetched we are displaying the overlay. What would you suggest?
    – Krunal
    Jul 2, 2013 at 4:57

3 Answers 3


Long waiting for content with loader is not good, but waiting without loader is deffinitely bad. Loader image is feedback, you should provide it anyway. Long actions without feedback are very confusing.

You can try to solve your issue on the different levels.

  • Technical level -- either pre-load DOM structure and cache it or load it with data in parallel ajax queries. Display loader until both the requests are handled. If you have different goods but the same DOM template, you can embed this DOM template into javascript and cache it. An simple example of such template is:

    <img src="#image_path">

    Also you can pre-load DOM structure before user requests the goods info.

  • Psychological level -- make long waiting tricky or useful for user so it would not be perceived as pain. The tricky way is to create more faster animation. All the bars take about a second, but are perceived a little different. Useful way is to show some ad image to user. Using fading effect stoles some time.
    enter image description here
    enter image description here
    enter image description here

According to your data, waiting up to one second is not so painful for user.

Using HTML templates with Javascript, very basic idea:

// template
var tpl = "<h1>#header</h1> <p>#text</p>";

// fill template with data
var out = tpl.replace("#header", "Hello").replace("#text", "Long text");

I think you got it. If you store template in external javascript file it could be cahced. There are a lot of templating engines now and here is description of super simple engine by J. Resig.

Hope it helps.

  • The waiting is about 400-600ms. But sometime it goes upto 1 second. I do not understand your points for psychological level? What do you intend to mean with it? Also can you explain the point on pre-load DOM strcture and ache it?
    – Krunal
    Jul 2, 2013 at 5:07
  • I've updated the answer. Jul 2, 2013 at 8:48
  • Hi, Thank you for your response. Your suggestions makes sense. However, I'm still not understand template caching part.. can you share some link for that?
    – Krunal
    Jul 2, 2013 at 13:14

You can read this useful article on the Usability Do’s And Don’ts For Interactive Design. The usability principle here is to have the users know that something is happening and that the system is not broken or that they're not left in the cold.

As a quote from the article says (for tl;dr people):

[…] by simply displaying a message or loading graphic for the user, they are assured that something is happening and that their action will be completed shortly.

You can see that Jakob Nielsen has found various response time limits to be helpful. And since you touch the 1 sec threshold, I'd point out this quote by Nielsen:

For operations where it is unknown in advance how much work has to be done, it may not be possible to use a percent-done indicator, but it is still possible to provide running progress feedback […].

  • Thank you for your response. I think we're on a right track as suggested by you and other experts.
    – Krunal
    Jul 2, 2013 at 12:39

Based on your comments it is clear you wish to stop the user from interacting with the system while the ajax request is ongoing.

Thus it seems to me reasonable to leave the overlay - without it, either the users can interact with the interface or you stop them without an overlay in which case they could think something is broken.

In a system I am working on we allow users to interact with the interface while Ajax requests are ongoing. We only display a small loader at the top of the screen. If the user performs an action that makes the ongoing ajax request invalid - we simply cancel the previous (invalid) request.

(Just to make you somewhat less concerned - in the same system user actions sometimes lead to a server request, and the server then makes multiple requests via an (really bad) API to another server; this can take upwards of a minute. We literally had to increase the request timeout on our server for this to work at all). So a second is not that much...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.