I am trying to display the loading element displayed immediately after the button press and before the AJAX call is made.
Here is my code and what I have tried:-
This code is inside my "on button click" function
$('.loading-container').fadeIn(0);
$('.loading-container').show();
$('.loading-container').css('display', 'block');
console.log("start");
setTimeout(function () {
getResults();
console.log("end");
}, 3600);
I have tried the beforeSend as well but it does not display the loading screen immediately after the button click.
The problem is that loading screen shows 4 or 5 seconds after the button click. How can I make it show immediately after the button click?
You can use async await, here is the reference: MDN - async function or you can use promises which are basically the same (MDN - Promises).