I want to set the cursor style to 'wait' while a lengthy javascript function is running, and then reset back to normal afterwards.
I thought this might be enough:
document.body.style.cursor = 'wait';
// long scripting here
document.body.style.cursor = 'auto';
However .. if I move the cursor to point at (e.g.) an <input> then the cursor changes to the appropriate type e.g. 'text'. (Tested via individual commands in the console).
I did find this similar question, which sets up a css rule of
html.wait, html.wait * { cursor: wait !important; }
and uses that via this js:
document.querySelector("html").classList.add("wait");
// long scripting here
document.querySelector("html").classList.remove("wait");
.. but .. it doesn't seem to kick in while the script is running.
Put an idle delay where JS can release the CPU back to the browser so it gets a chance to do a repaint (or whatever it's called).
const DELAY_FOR_REFRESH = 25; // milliseconds
document.querySelector("html").classList.add("wait");
setTimeout( () => {
// long scripting here
document.querySelector("html").classList.remove("wait");
}, DELAY_FOR_REFRESH);
In limited testing, the DELAY_FOR_REFRESH needed to be more than at least 20ms — any quicker and the observed behaviour is that the browser doesn't repaint/update before the long scripting gets started.
NB. the reset of cursor back to 'auto' needs to happen at the end of the setTimeout() functionality (not after it).
My mental model of what happens here is something like this: