JQuery loading gif freezes during heavy dom manipulation [duplicate]

Question

Possible Duplicate:
How to make GIF rotate when the tree is loading in Javascript

Like the title says, my loading gif freezes while going through an ajax success call. The success call has some heavy DOM manipulation to do, and since the UI is single threaded, it causes my loading gif to freeze.

So far I have tried to

1. Optimize my functions, but there is so much data that has to be loaded at the same time.
2. Use setTimeout(), but it shows all the gifs after everything is loaded.
3. Use spin.js, but it too freezes during the DOM manipulation.

Is there any way to get around this?

Any help is very much appreciated.

---

EDIT 1:
It's related to ArcGIS javascript, where I have to retrieve about 4000 rows from the database, and then show points at the correct latitude and longitude via a for-loop that goes through all the points.
I'm trying to make a simple overview like this one^?.

Answer 1

You have to emulate multithreading in order to let the UI remain responsive while the AJAX response is processed.

The only non-trivial part of this is to arrange the processing function so its task can be splitted and performed by steps.

As you have got the data you call:

function ProcessData() {
    var done = false;        

    /*
        access the data here and perform a "bit" of data processing.

        if the task finishes set done to true
    */

    if(!done) {
        setTimeout(ProcessData, 100); // this gives the UI 0,1 secs
    }
}

Of course the above function must be have some way to access the data (with a global or, better, properly setting its context), register the progress of the operation and so on.

It's just to give an idea but there is a lot on the web that explains in detail.

Or you may get a copy of "Secrect of the JavaScript Ninja" and read the chapter "Taming threads and timers".

Hope this helps.