Whenever I work with ajax requests, I always find throbbers more complex then I first anticipated. It is important to let the user know that there is an asynchronous request taking place, however if this request is fast and takes only a fraction of a second, the throbber is also displayed for a fraction of a second, appearing “flickery”.

One solution is to handle the response as soon as it is available but display the throbber for a minimum amount of time, avoiding the flickery appearance. The problem with this approach is that although we handle the response as soon as it is available, we have perceived latency for the duration of time the throbber is still visible.

Although not a perfect solution, I can set a isLatentThreshold, during which no throbber is displayed. Then, if the threshold is reached without a response, display with a set minimum duration (to avoid flicker). I have written a tiny little jQuery plugin (0.5k minified) that handles this behaviour. Its use is simple. All that is required is to wrap the XHR object with the throbber plugin and pass a few arguments. A little bit of code will demonstrate this better.

$($.ajax(/* jQuery ajax settings here */))
.throbber($("#responseContainer"));

The throbber plugin works by applying a loading class name to the element specified in the first argument (Object). The actual throbber graphic and positioning can then be controlled via CSS. The second argument (Object), allows you to modify the default isLatentThreshold (ms), minThrobberDisplay(ms) and loadingClass.

$($.ajax(/* jQuery ajax settings here */))
.throbber(responseContainer, {
isLatentThreshold: 150,
minThrobberDisplay: 400,
loadingClass: "ajax-loading"
});

The full source code available here.

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now