I'm adding a spinner to a button when it is clicked in order to indicate to the user that some lengthy processing is occurring.
The problem is that the spinner does not get displayed until after the processing has completed, which, of course, defeats the purpose of the spinner.
How can I get the spinner to display before the start of the processing?
function clicked() {
document.getElementById("spinner").classList.add("fa", "fa-spinner", "fa-spin");
// the for loops are to imitate my behind the scenes processing tasks.
for (let i = 0; i <= 199999999; i++) {
for (let j = 100000; j <= 1; j++) {}
}
document.getElementById("paragraph").innerHTML = 'Done with the processing.';
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button class="button" onclick="clicked();"><i id="spinner"></i>Submit</button>
<p id="paragraph"></p>
</body>
</html>