How to display 'Loading' when making a 'synchronous' AJAX call in pure JavaScript?

Question

I want to make sure the result is shown to user, so I make synchronous AJAX call. It's quite simple to display a 'Loading' indicator with asynchronous AJAX (the examples are everywhere), but when I use synchronous AJAX call with XMLHttpRequest, the loading indicator GIF image doesn't show up at all.

Some said that it's impossible to show indicator when doing a synchronous call (block until having response from server). But I just want to ask to see whether there's a way to do it.

Answer 1

It's "impossible" because Javascript is single-threaded, and the synchronous call blocks updates to the UI.

However, you may be able to display an animated 'loading' graphic before launching the synchronous AJAX call, and removing it upon success or failure. I believe most browsers will be able to continue rendering the animated gif even while technically blocked for the synchronous call.