Bootstrap spinner not working before and after ajax call - html

Question

I want to show/hide the boostrap spinner in div #loading before and after loading more data in the ajax infinite scroll shown below. The ajax loads data perfectly well but the spinner does not show when scrolled to the point to trigger ajax. Pls help. Helping with some code example will be great.
<div class="p-3 text-center" id="loading" style="display: none" >
<button class="btn btn-danger" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">Loading more items...</span>
</button>
</div>
<script type="text/javascript">
let in_ajax = false;
var flag = 20;
$(window).scroll(function() { //scroll function
if (!in_ajax) {
if ($(window).scrollTop() >= $('#result').height() - $(window).height()) {
in_ajax = true;
$.ajax({
type: 'POST',
url: 'get_results.php', //get result page
data: {
'offset': flag,
'limit': 10
},
beforeSend: function() {
$("#loading").show(); //to show spinner before ajax sends data
},
success: function(data) {
$('#result').append(data);
flag += 10; //add 10 to last offset value after callback
in_ajax = false;
},
complete: function() {
$("#loading").hide(); //to hide spinner after ajax call
}
}); //close ajax
}
}
});
</script>