javascript : Create a suitable function for loading the button?

I have a form, I want a loading to be displayed on the button when the form button is submitted.
I created this mode but in a simple mode.
I want to create a function that I can use in all forms, please help me, I am not fluent in jQuery?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const btnsabt = $('.btn-sabt');
btnsabt.addClass('submit-btn');
btnsabt.prop('disabled', true);
btnsabt.find('i').prop('hidden', false);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <input asp-for="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin" hidden></i>save
    </button>
  </div>
</form>

<!-- end snippet -->

Not sure what the btnsabt.addClass('submit-btn'); is for, if needed uncomment it

Call toggleLoader(1); to spin and toggleLoader(0); to stop

the task should ideally be async since the interface needs to update

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const toggleLoader = show => {
  $('.btn-sabt')
//  .toggleClass('submit-btn',show)
  .prop('disabled', show)
  .find('i').toggleClass('hide',!show)
};

$(function() {
  $('#MobileUserForm').on('submit', (event) => {
    event.preventDefault(); //prevent form submission
    
    toggleLoader(1);  // show the spinner and disable

    //perform tasks
    //after completion, remove the loading
    
    //test to show a delay to visualise the loader
    setTimeout(() => { // remove this line
      toggleLoader(0); // hide the spinner - call this at the end of the task
    }, 3000); //remove this line

   
  });
});

<!-- language: lang-css -->

.hide{
  display: none !important;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="MobileUserForm" method="post">
  <div class="form-group">
    <input asp-for="Mobile" type="number" class="form-control" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-sabt">
       <i class="fa fa-refresh fa-spin hide"></i> save
    </button>
  </div>
</form>

<!-- end snippet -->