Changing cursor to waiting in javascript/jquery

Fine-tuning cursor changes: The art of being efficient

Whenever you run into an operation that might have your users drumming their fingers, the cursor's job is to pacify them with a soothing 'wait' signal. Here's what best practices look like:

• Play your first card right: switch to the waiting cursor before entering the land of time-consuming code execution.
• If you're after lean code, go for vanilla JavaScript. If you're in the mood for a little syntactic sugar, bring out the jQuery.
• If your CSS rules are being rebelliously overridden, fight back with your mighty CSS selectors or add !important for reinforcement.
• Meet jQuery's toggle classes, your secret weapon when you need your cursor to change states back and forth in a blink.

Cross-browser compatibility: Because we care

Don't just change those cursors and hope for the best, do it so that every browser on this planet knows what you're up to:

• Stick to the 'one size fits all' image of the cursor world: standardized cursor names such as 'wait' and 'default'.
• Designing a cursor yourself? Cool, but always keep a standard cursor as a fallback to stay good friends with all browsers.
• Casting your cursor spell on body is safe, you can, however, customize your targets with specific selectors or go wild with the * selector.

Smooth transitions: Keep it user-friendly

To avoid startling your users with your cursor morphing skills:

• Turn the cursor from 'wait' back to default as soon as you’re done flexing your muscles.
• Keep your cursor transformations contextual. You don’t want your users squinting at the screen in confusion.
• In times of page-load suspense or when waving goodbye with beforeunload, changing the cursor keeps your users in the loop.

Advanced cursor management: Level up your game

Marvelous with CSS

Sometimes, CSS is your best friend:

// The wait is part of the journey...
body.waiting, body.waiting * {
    cursor: wait !important; // because we insist!
}


You can then squeeze in this little JavaScript to switch this class on and off:

// Let's stretch a bit before the waiting marathon...
document.body.classList.add('waiting');
// and finally, take a bow.
$('body').addClass('waiting');


Master event handling

The cool thing about ajaxStart and ajaxStop events in jQuery is they allow automated cursor setting:

// Hey, look busy when I'm busy!
$(document).on("ajaxStart", function() {
    $('body').css("cursor", "wait");
}).on("ajaxStop", function() {
    // All done? Phew! That never gets easier.
    $('body').css("cursor", "default");
});


Asynchronous tasks and you

When dealing with asynchronous operations, you might want to go for promises:

// Patience is a virtue, my friend.
async function loadData() {
    document.body.style.cursor = 'wait'; // time for a coffee break!
    await fetchData(); // Your data loading function
    document.body.style.cursor = 'default'; // back to work!
}


Troubleshooting Tales from the Cursor World

CSS Clash of the Titans

If your cursor styles are clashing like stubborn mountain goats, you might be dealing with a pesky CSS specificity issue:

• Stay ahead of higher specificity rules and bring out your big guns: use !important to reinforce your styles.
• Don your detective hat and inspect elements using your browser's dev tools to track down those conflicting styles.

The case of the delayed cursor

If your cursor isn't catching up and there's that frustrating delay in your cursor change, it could be because:

• Your browser is probably swamped with rendering heavy operations.
• You are running quite a few synchronous tasks before switching cursor styles.

When the cursor misbehaves

If your cursor seems to be lost and not changing, you might be applying the style to the wrong element:

• Ensure you're directing the style change to the correct elements.
• Don't shy away and use $('*').css("cursor", "progress"); to apply cursor change widely—but watch out for performance!