Submit form then disable in Bootstrap 5

In Bootstrap v5, how do I submit a form via Post method first, and then after the form is submitted, show the form is being processed? I've found lots of examples for Bootstrap v4 and jQuery but Bootstrap v5 does not have jQuery and the documentation says there could be issues with jQuery.

Here is a striped down version of my form:

<form action="" method="post" id="reqform">
  <div class="input-group">
    <div class="form-floating mb-3">
      <input class="form-control " id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
      <label for="nameInputId">Name</label>
    </div>
  </div>
  
  <button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
</form>

I tried this in a script block at the bottom of the file:

//when click submit button, show loading
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener("click", function () {
    // disable button
    submitBtnElm.disabled = true;
            
    //disable rest of form
    document.getElementById("nameInputId").disabled = true;
            
    //add spinner to button and change text to "loading'''"
    submitBtnElm.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
});

In Chrome on CentOS 7, the form never gets submitted to the backend; I just get the loading button. On Firefox, the form gets submitted but the name field does not have a value on the backend. If I strip out this JavaScript, everything works fine.

I tried the form field onsubmit but I get the same results:

<form action="" method="post" id="reqform"  onsubmit="return disableForm(this);"> 

I'd like to first post to the backend server and then after the post, show the loading button and disable the other fields. I want a way that the JS does not interfere with what is sent to the backend server. In other words, I'd like to be able to submit to the backend server when JS is disabled. I've found people asking the same with jQuery but none of them work for me.

Update: I also tried:

submitBtnElm.addEventListener("submit", function ()

I setup a breakpoint on the backend server. The JS does not execute while the server is processing the information. As soon as the form gets submitted to the server, I want to change the button and form so the user can not do anything.

Update 2 I found this article that wraps the code that disables the form in a setTimeout: https://chasingcode.dev/blog/javascript-disable-submit-button-form/

For me, it works in both Chrome and Firefox on CentOS 7. I don't have a mac to test. Here is my updated code that worked:

submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener('click', function(event) { 
            setTimeout(function () {
                event.target.disabled = true;
            }, 0);
});

Do any Javascript gurus know if this is a good cross browser solution? If not, what is? The next best solution I found was where the functional button is swapped out with a non-function one that said something like 'loading'.