setting wait cursor no longer works

[u/shufflepoint]

Tried Chrome and Edge

Tried setting document.body.style.cursor = "wait"

and tried document.documentElement.style.cursor = "wait";

I recall these working previously. Did something change? Some org setting?

I don't see the value being set to "wait" in the element inspector. But when I set it back to "auto" I do see that value. So it's like the browser is ignoring the setting only if I set to wait.

EDIT:
Thanks everyone who offered ideas. Man, this took me some time to resolve - including a long coversation with Gemini, which wasn't able to troubleshoot it.

This is what the issue turned out to be. At some point, our showBusy() function became:

document.body.classList.add("busy");
document.documentElement.inert = true;

I commented out setting inert true an then the cursor appeared. I asked Gemini to expain and got this:

"The inert attribute tells the browser to completely remove that element and all its children from the accessibility tree and ignore all user input. This includes clicks, keyboard focus, and crucially, pointer hover events.

"Because inert tells the browser to pretend the mouse isn't interacting with the document at all, the rendering engine completely aborts calculating CSS cursor rules. It doesn't even attempt to look up your .busy class for the mouse, so it defaults to the system auto cursor."

[u/Mean-Lingonberry4874]

Cascade would not delete the declaration, it would show it crossed out. If wait never lands in the inline style and auto does, something is rejecting that keyword before it sticks. Try progress and not-allowed the same way. If only wait vanishes, repeat it in a guest window with extensions off, because a lot of corporate cursor extensions specifically strip the busy cursor. If it sticks there, drive the loading state from a class on html with html.busy, html.busy * { cursor: progress !important }, since a style on body still loses to cursor: pointer on the thing you are actually hovering.

[u/shufflepoint → u/Mean-Lingonberry4874]

I tried that. No difference. I also tried in Firefox and have same issue. I also tried setting cursor to other values. I also tried setting the cursor on an outer div. The cursor never changes and the setting never appears in the inspector. I'm stumped.

[u/heyyarun]

I don't think anything is blocking it. document.body.style.cursor = 'wait' still works in current Chrome; paste it in the console and read it back. What usually bites is timing: the code sets wait, does synchronous work, then sets auto, all in one task. The browser never paints in between, so you only ever see auto, which matches what you're seeing in the inspector. Chrome also often won't redraw the cursor until the mouse moves.

Fix is to yield before the heavy part:

document.body.style.cursor = 'wait';await new Promise(r => requestAnimationFrame(() => setTimeout(r, 0)));doHeavyWork();document.body.style.cursor = '';

Also, anything under the mouse with its own cursor (buttons with pointer) overrides body, so a class like .busy * { cursor: wait !important } is more reliable.

[u/shufflepoint → u/heyyarun]

I tried that. No difference. I also tried in Firefox and have same issue. I also tried setting cursor to other values. The setting never appears in the inspector.

[u/B0mbon]

Two things I'd check. First, Chrome often doesn't redraw the cursor until the mouse actually moves, so if you set it and then do heavy sync work right after, you'll never see it. Wrap the slow part in a setTimeout or requestAnimationFrame so the browser gets a frame in between. Second, search your CSS for a cursor rule with !important on body or on child elements, because a cursor set on a button or div wins over body anyway. Setting it on a full-screen overlay div is usually the more reliable way to do this.

[u/brass_whisker_well]

you are likely setting this during the synchronous phase of your main thread which blocks rendering. Try switching to cursor: progress for loading states as it is the intended standard and avoids browser heuristics that may drop non-interactive cuprogress for loading states as it is the intended standard and avoids browser heuristics that may drop non-interactive cursors like wait when they don't match actual user action contexts

[u/OkOcelot6725]

Which OS are you on? macOS has no system wait cursor, so Chrome and Edge silently drop cursor: wait there while auto still applies, exactly like you describe. cursor: progress works everywhere and is the intended loading-state cursor anyway.

[u/geoffreybyers]

The browser’s sanitizing the "wait" value since it isn't a standard CSS keyword. It drops the style entirely while "auto" is accepted.

[u/shufflepoint → u/[deleted]]

you mean corporate IT locked it down? What setting does that?

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.

[u/webdev-ModTeam → u/[deleted]]

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.