Add a loading spinner on HTML until it receives the required data - html

Question

My Node API returns a JSON object, the object is being displayed on HTML table. However, my Node app takes some time to process and return the data. So till the time data has being retrieved I want a spinner to load on the page.
$(document).ready(function() {
$("#table1").hide();
$("#myButton").click(function() {
$("#myButton").hide();
$("#table1").show();
$.ajax({
url: "http://localhost:8090/api/route1",
type: 'POST',
data: {
data1: str1,
data2: str2
},
dataType: 'json',
success: function(res) {
console.log(res);
console.log("Result1", res.result1);
console.log("Result2", res.result2);
$('#td1').append(res.result1);
$('#td2').append(res.result2);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="spinner" id="loadingBtn">
Loading...
</span>
<table class="table" id="table1">
<tbody>
<tr>
<td id="td1"></td>
</tr>
<tr>
<td id="td2"></td>
</tr>
</tbody>
</table>
How and where do I put the spinner id so that it is only displayed until the data is fully rendered onto the HTML table.

Answer 1

$(document).ready(function() {
$("#table1").hide();
$("#myButton").click(function() {
$("#myButton").hide();
$("#table1").show();
$.ajax({
url: "https://www.mocky.io/v2/5ec78da22f0000640042721f",
type: 'GET',
dataType: 'json',
success: function(res) {
console.log(res);
console.log("Result1", res.result1);
console.log("Result2", res.result2);
$('#td1').append(res.result1);
$('#td2').append(res.result2);
},
beforeSend: function() {
$("#loadingBtn").show();
},
complete: function() {
$("#loadingBtn").hide();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="spinner" id="loadingBtn" style="display:none;">
Loading...
</span>
<button id="myButton">Press</button>
<table class="table" id="table1">
<tbody>
<tr>
<td id="td1"></td>
</tr>
<tr>
<td id="td2"></td>
</tr>
</tbody>
</table>

Answer 2

You can just add the loading spinner on loading and done. Show the spinner on call, and just hide it when the call is done. like so:
$.ajax({
type: 'POST',
success: function(res){
console.log(res);
}
}).done(function() {
setTimeout(function(){
$(".spinner").fadeOut(300);
},500);
});
take a look at this codepen:
https://codepen.io/yic666kr/pen/mxmvbV

Answer 3

It depends on your structure where you have it placed but I'll go with what you have put here. You have it visible when you start loading and hide it once data is loaded from your ajax.
$(document).ready(function() {
$("#table1").hide();
$("#myButton").click(function() {
$("#myButton").hide();
$("#table1").show();
// show the loader when you click the button
$('#loadingBtn').addClass('spinner--is-active')
$.ajax({
url: "http://localhost:8090/api/route1",
type: 'POST',
data: {
data1: str1,
data2: str2
},
dataType: 'json',
success: function(res) {
console.log(res);
console.log("Result1", res.result1);
console.log("Result2", res.result2);
$('#td1').append(res.result1);
$('#td2').append(res.result2);
// hide the loader
$('#loadingBtn').removeClass('spinner--is-active')
}
});
});
});
.spinner {
display: none;
}
.spinner--is-active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="spinner" id="loadingBtn">
Loading...
</span>
<table class="table" id="table1">
<tbody>
<tr>
<td id="td1"></td>
</tr>
<tr>
<td id="td2"></td>
</tr>
</tbody>
</table>

Answer 4

Just show your spinner in beforeSend of ajax function and hide it after data is loaded under success function.
$.ajax({
url: "http://localhost:8090/api/route1",
type: 'POST',
data: {
data1: str1,
data2: str2
},
dataType: 'json',
beforeSend: function() {
$("#loadingBtn").show();//show spinner
},
success: function(res) {
console.log(res);
console.log("Result1", res.result1);
console.log("Result2", res.result2);
$('#td1').append(res.result1);
$('#td2').append(res.result2);
$("#loadingBtn").hide();//hide spinner
}
});