After clicking the button and seeing the alert message, I noticed that the loading animation does not display during the
await new Promise(r => setTimeout(r, 2000));/* script.js */
async function refreshStatus() {
document.getElementById("loading-overlay").display = "flex";
document.getElementById("loader").display = "block";
alert("trying");
try {
await new Promise(r => setTimeout(r, 2000));
var response = await fetch(
the_url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify({"ok": "yes"})
}
);
}
catch (_error) {
document.getElementById("error-div").display = "flex";
document.getElementById("error-div").innerHTML = _error.message;
return;
}
}/* loading.css */
#loading-overlay {
z-index: 10;
display: none;
}
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#error-div {
z-index: 20;
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link href="loading.css" rel="stylesheet" /> -->
<!-- <script src="script.js" type="text/javascript" /> -->
</head>
<body>
<div id="loading-overlay">
<div id="loader"></div>
<p id="error-div"></p>
</div>
<button type="button" id="button_queue_go" onclick="refreshStatus();">Show Status</button>
</body>
</html>