I have some JavaScript code that does some pretty intensive data processing (takes about two seconds to complete) when the user presses a button, and I'd like to set the wait cursor globally on the page in the meantime.
I use AngularJS and this is what I have tried:
document.body.style.cursor = 'wait';
$timeout(function() { document.body.style.cursor = 'wait'; }, 1)
.then(function() { /*procesamiento intensivo aquí*/ })
.then(function() { document.body.style.cursor = 'default'; });
...but it doesn't work as expected: processing is done but the cursor doesn't change. Interestingly, if I delete the last line I see that the cursor does change, but after the rendering is done.
I'm sure I'm missing some essential aspect of the UI event loop in Javascript, but I can't see it. How could I get the wait cursor to be seen?
You have two problems.
The first is that you only change the cursor in the body (obviously the change will be seen on the body but not on the rest of the elements), I suggest something like
The second is that you do the cursor change within the same view cycle (Angular) so the cursor change is not done.
This example works (associate it to some button)
josejuan's answer has worked with a small change. I had to define a new style ( seen here ):
...and the code is:
Note that I have also had to increase the interval value for the timeout.
Bind the cursor to an element of your $scope and update the scope when you get into heavy processing.
And in your javascript:
Try to avoid mixing pure javascript with angular as much as possible, as you will have many problems with cycles and synchronization.