Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, especially when loading data from a server via AJAX.
One issue I've encountered is that if the slowdown is caused by a processor-intensive function, the gif freezes.
When a processor-hungry function is running, most browsers will cause the animated GIF to stop animating. This can give the user the false impression that something has gone wrong, when in reality the process is still functioning.
Example on JSBIN
In the example, clicking the "This is slow" button will tie up the processor for a few seconds, depending on the specs of your PC. You can adjust the duration of this process in the HTML with the "data-reps" attribute.
- Expected Outcome: The animation starts running on click, and when the process is finished, the text changes (usually, the indicator would be hidden as well, but it's left spinning in this example for clarity).
- Actual Result: The animation starts but freezes until the process completes, leading to the misconception that something has gone wrong (until suddenly, it finishes).
Is there a way to indicate a running process without freezing if JavaScript is keeping the processor busy? If an animated solution is not feasible, I may resort to displaying and hiding a static text message like Loading..., although an animated indicator is more visually engaging.
In case you're wondering why I'm using processor-intensive code instead of optimizing it: The code involves complex rendering that is necessary. While the code itself is efficient, the complexity of its operation demands heavy processing. It only takes a few seconds, but it can still lead to user frustration, hence the importance of indicators for good UX.
Another issue with using gif spinners for processor-heavy functions is that the spinner may not show until all synchronous code has executed - meaning it might not display until it's time to hide it.
- JSBIN example
- An easy workaround I've found (used in the previous example) is to wrap everything after showing the indicator in
to make it asynchronous. While this works, it's not the cleanest solution - there may be a better approach.setTimeout(function(){ ... }, 50);
I believe there must be a standard method for handling indicators during processor-intensive loading that I'm not aware of, or perhaps using text like Loading... with setTimeout is common practice? My searches have not yielded any relevant results, as most related issues turn out to be unrelated.
Edit: Some valuable suggestions have been provided in the comments. Here are some more specifics about my particular issue:
- The complex process involves manipulating large JSON data files in memory (JavaScript operations after loading the files) and rendering SVG visualizations, including a detailed, zoomable world map using Raphael.js. Some parts involve DOM manipulation, while others do not.
- Unfortunately, I need to support IE8, but I could provide minimal fallback for IE8/IE9 users like a simple
Loading...text, and offer a more modern solution for other browsers.