Busy or loading spinner

General Q&A
1

How can I display a busy or loading spinner when I am about to execute a long UI action?

2

Developers can make use of an existing spinner that automatically appears whenever something underlying takes a while to execute. This spinner is a lower level component that cannot be accessed directly by developers, but it can be triggered by returning a Promise that is wrapped around the code that takes long to execute. The spinner will be visible while the code in the Promise is busy executing and then disappear once the Promise has resolved.

The example below has a setTimeout function to mimic code that takes long to execute:

function testSpinner() {
    return new Promise(function (resolve, reject) {
        // Code that takes long to execute
        setTimeout(function () {
            console.log("Eventually done");
            resolve();
        }, 10000);
    });
}

Another alternative is to create your own spinner using a custom html component. Using this method will allow developers to have more control over the spinner if needed.

2 Likes