Mootools: Delayed spinning icon while ajax request

Question

I'm using mootools.

There's a page with ajax tabs. On click, the new tab gets loaded using the mootools Request.HTML command.

Because there will be some very timeconsuming SQL Queries in the background, I'm displaying a spinning icon until the page has loaded (see code).

122       $('detailContent').set('html', '<img src="common/img/ajax-loader-big.gif" alt="Loading content..." class="tabSwitchSpinner" />');
123       new Request.HTML({
124         url: url,
125         method: 'get',
126         evalScripts: true,
127         update: $('detailContent')
128       }).send();
129       $('detailNavi').getElement('.active').set('class', '');
130       this.getParent('li').set('class', 'active');

This works great for pages that take a while to load, but if I load a page that only takes half a second to load, the spinning icon flashes up quickly and distracts the user.

How can I change this code, so that the icon only gets shown (line 122) if the Request takes longer than half a second?

---

Edit: To clarify the problem, I need a behavior as following:

• Tab takes 200ms to load - Tab switches directly
• Tab takes 1600ms to load - After 500ms the current tab changes to the spinning "ajax loading" icon, and after another 1100ms the new tab loads

Answer 1

what andrew said, only i'd use onRequest as the trigger event:

http://www.jsfiddle.net/dimitar/KGNvu/

var timer;

new Request.HTML({
    url: '/ajax_html_echo/',
    data: {
        'html': "request complete"
    },
    method: 'post',
    update: 'target_div',
    onRequest: function() {
        timer = (function() {
            document.id("target_div").set("html", "<img src='http://straval.com/img/ajax-spinner-large.gif' />");
        }).delay(500);
    },
    onSuccess: function() {
        $clear(timer);

    },
    onComplete: function() {
        $clear(timer);
    }
}).send();

jsfiddle is a good example as it artificially adds between 1 and 5 seconds delay on all test requests to simulate network lag.