Animated gifs to signal that something is computing ? what are better alternatives ?

Question

I have written some javascript whereas if you click on some divs those expand with some data. it takes a few seconds to populate the divs. So to avoid users getting frustrated I have done the following:

• if user clicks on div then add animated gif (moving bar,...) on div
• when data is ready event is triggered and animated gif is removed

can somebody suggest a better approach or pattern ? since I don't know how expensive for the browser to render animated gifs...

thanks

Answer 1

Rendering GIFs is not very expensive in terms of performance. Displaying animated GIF loaders etc. is definitely better than doing nothing on waiting time. It is much more important to users to know that something is happening than finishing a split second earlier.

Answer 2

As long as the GIF itself is small and properly preloaded, that's a fine way to go.

Answer 3

The best thing would be to progressively reveal information as you receive it, but in the final form from the beginning. This is easier said than done. Browsers do half of this by rendering different page elements as they are received but fail at the other half by moving things around as formatting information is received and by making you think you can do something before you are actually allowed to do it.

The second best thing would be to have an animated gif that gives some indication of how long the process will take. Many systems fail utterly at this and have been compared to a car navigation system that says "Estimated Time of Arrival 10 minutes .. 8 minutes ... 2 days ... 1 second ... 3 hours."

Because of those failures, I would say that what you are doing is the right thing.