How can I avoid a "blinking" progress div on a fast result with jQuery ajax?

Question

I am using jQuery for my AJAX calls to an ASP.NET backend using this approach. I am using .ajaxStart and .ajaxStop to show and hide a progress indicator. When the AJAX request finishes very quickly, the progress indicator "blinks" because it is not displayed long enough.

One possible solution would be to display only after a minimum time (like UpdateProgress.DisplayAfter in MS AJAX). Another would be to make sure the indicator displays for a minimum time. Unfortunately, the jQuery Pause plug-in doesn't seem to work, and effect delay tricks like this don't work either. Some sort of solution based on JavaScript setTimeout similar to this SO answer seems most likely, but the problem is that the Ajax call keeps processing. Thus the result gets displayed while the progress indicator is still visible.

So, can it be done? And if so, how?

Answer 1

Well in the early stages of a project that uses Ajax with progress indicators, of course you will have a blinking effect, because you (hopefully) are not working with a huge amount of data as you're testing. You'll find as your project gets more and more data, the progress indicator will stay longer and longer. I don't recommend purposely creating a delay to keep the progress indicator there because it will detract from the user experience. Try playing around with the javascript setTimeout() function.

Answer 2

Try the following:

$("#spinner")
    .bind("ajaxSend", function() {
            $(this).fadeIn(1000);
    })
    .bind("ajaxComplete", function(){
        $(this).stop();
        $(this).hide();
    });

The idea is that you fade in the spinner with a time delay (in this case 1000) and cancel the animation and hide on ajaxComplete.

If you want to do a delayed show you might experiment with using animate() rather than fade() and chaining the calls (e.g $(this).animate(/* something here */).show())

Hope this helps!