Change cursor to wait while the angular $apply is running

Question

I have a complicated page with a lot of nested ng-repeat. The $apply function can take several seconds. During that time the browser is hung and the user cannot do anything.

As a courtesy I would like to change the mouse pointer to hourglass while $apply is running. How can I do that?

Answer 1

The trick is to change the cursor (using addClass), then invoke the slow code with a timeout at the end of which you change the cursor back to normal.

JSFiddle

    var mybody = angular.element(document).find('body');
    mybody.addClass('waiting');   // set cursor to hourglass
    setTimeout(function() {
        doSlowStuff();
        $scope.$apply();
        mybody.removeClass('waiting');  // set cursor to normal
    }, 0);

You have to do the slow stuff in a timeout so that the addClass will be applied before the slow stuff starts.

The CSS is just

.waiting { cursor: wait; }