How to show busy cursor while the request is in process


#1

Hi

I have created an electron client application which communicates with a WCF Restful Services and fetch data to display onto the electron screen. I want to change the cursor to be ‘busy’ while the service is processing the request i.e. getting data from the DB. How can I do that ? Here is a sample code I am using -

btnSubmit.addEventListener('click', function () {
    var options = {
        host: 'localhost',
        port: 8080,
        path: '/GetEmployeeData?' + strPageNum,
        method: 'GET'
    };

    http.request(optionsCount, function (res) {
        res.on('data', function (chunk) {
             buffersCount.push(chunk)
        });
        res.on('end', function () {
            result = JSON.parse(Buffer.concat(buffersCount).toString());
            totalCount = result;
            //display data in a HTML table , 
        });
    }).end();
});

Thanks in advance !


#2

You can do this with a bit of CSS plus JS. Add a rule to the body to change the cursor to progress or wait when it has a certain class, say busy-mouse. Then add the class when before you start your reqest, and remove it when the request is done. Example:

/* style.css */
body.busy-cursor {
  cursor: progress;
}
// script.js
btnSubmit.addEventListener('click', function () {
  // ...

  document.body.classList.add('busy-cursor');

  http.request(optionsCount, function (res) {
    // ...

    res.on('end', function () {
      document.body.classList.remove('busy-cursor');

      // ...
    });
  });
});

You can read more about CSS’s cursor and possible values over on MDN.


#3

Thanks a lot. It worked like a charm. Getting to change the default cursors now easily now.

Also any idea if I can show any animated cursors like spinning wheel or something like that ?


#4

Mainly it depends on which platform you’re on. I don’t know about Windows or Linux (haven’t tested on them) but I know on that macOS the wait cursor will show the default spinning color wheel. Unfortunately, according to MDN:

All image formats supported by Gecko can be used. This means that you can use PNG, GIF, JPG, BMP, CUR, etc. images. ANI is not supported. An animated PNG or GIF will not create an animated cursor.

So you’re stuck with platform defaults for animated cursors. :confused: