Bootstrap spinner not working before and after ajax call

问题

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>

来源：https://stackoverflow.com/questions/65582759/bootstrap-spinner-not-working-before-and-after-ajax-call