Tengo un código JavaScript que realiza un procesamiento de datos bastante intensivo (tarda unos dos segundos en completarse) cuando el usuario pulsa un botón, y me gustaría establecer el cursor de espera a nivel global de la página mientras tanto.
Uso AngularJS y esto es lo que he intentado:
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'; });
...pero no funciona como esperaba: el procesamiento se realiza pero el cursor no cambia. Curiosamente, si elimino la última línea veo que el cursor sí cambia, pero después de finalizado el procesamiento.
Estoy seguro de que estoy pasando por alto algún aspecto esencial del ciclo de eventos del UI en Javascript, pero no consigo verlo. ¿Cómo podría conseguir que se vea el cursor de espera?