KevinGrennansondra
I agree, that would be a good approach.
how does it know when my backend queries are done
When using ajax, the request is sent to the server and (after 30 seconds in your case) when the response from the server has arrived, a callback function is called where you can make your load message invisible.
Take a look at this demo:
// Make load message visible before sending request to server.
// Create new FormData-Objekt:
const params = new FormData();
// ... append parameters:
params.append('param1', 'some-param');
params.append('param2', 'some-other-param');
params.append('numparam', '1.24');
// Send request to server using method post:
fetch('testpost.php', {
method: 'post',
body: params
}).then(res => {
// Response from server has arrived,
// Use response as text:
return res.text();
}).then(res => {
// Output response:
console.log(res);
// In this place you can make your load message invisible
});