I am using this spinner code below :
Code:
<div id="spinner" style="visibility:hidden;" class="text-center">
<div class="spinner-border" role="status"></div>
</div>
And set the javascript visibility below:
Code:
function loadXMLDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState !== 4 || xhttp.status !== 200 || !xhttp.responseText) {
document.getElementById('spinner').style.visibility = "visible";
loadXMLDoc();
return;
}
document.getElementById('spinner').style.visibility = "hidden";
document.getElementById('p1').innerHTML = xhttp.responseText;
};
document.getElementById('spinner').style.visibility = "visible";
xhttp.open("POST", "manage.php", true);
xhttp.send();
}
The code works but I noticed that even after successful retrieval of the responseText, the spinner visibility will show from time to time.
Why is this happening ? Is it perhaps of the xhttp.onreadystatechange ?
Update: I confirm that it is because of the xhttp.onreadystatechange. But which one should be used ? the onload or onreadystatechange ?
FOLLOW UP QUESTION: Can I do xhttp.abort(); after the const xhttp = new XMLHttpRequest(); or where should I properly place the abort method. My reason is that if the processing takes time, the user can click the button again to retry the process.