Why does my spinner GIF stop while jQuery ajax call is running?

I don't remember precisely what caused it, but we had a similar issue with IE6 in a busy box and we fixed it with this incredible hack in the Javascript:

setTimeout("document.images['BusyImage'].src=document.images['BusyImage'].src",10);

That just sets the image source to what it was before, but it is apparently enough to jostle IE out of its stupor.

edit: I think I remember what was causing this: We were loading the animation into a div with display: none. IE loads it and doesn't start the animation, because it's hidden. Unfortunately it doesn't start the animation when you set the containing block to display: block, so we used the above line of code to trick IE into reloading the image.

It's not the Ajax call that's freezing the browser. It's the success handler (applyTemplate). Inserting HTML into a document like that can freeze IE, depending on how much HTML there is. It's because the IE UI is single threaded; if you notice, the actual IE menus are frozen too while this is happening.

As a test, try:

applyTemplate = function(msg) {
   return;
}

Are you sure that its during the AJAX call that the GIF isn't spinning?

In your concessions.aspx place this line somewhere in the handling of GetConcessions:-

System.Threading.Thread.Sleep(5000);

I suspect that the gif spins for 5 seconds then freezes whilst IE renders and paints the result.

The image freezes because while it is hidden the animation is disabled by IE.

To fix this, append the loading image instead of unhiding it:

function showLoader(callback){
    $('#wherever').append(
        '<img class="waiting" src="/path/to/gif.gif" />'
    );

    callback();
}

function finishForm(){
    var passed = formValidate(document.forms.clientSupportReq);

    if(passed)
    {
        $('input#subm')
            .val('Uploading...')
            .attr('disabled','disabled');
        $('input#res').hide();
    }

    return passed;
}
$(function(){
    // on submit
    $('form#formid').submit(function(){
        var l = showLoader( function(){
                         finishForm() 
                    });

        if(!l){
            $('.waiting').remove();
        }

        return l;
    });
});