Элемент не меняет видимость при удалении класса

function sleep(milliseconds) { 
  var start = new Date().getTime(); 
  for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
      break; 
    } 
  } 
} 
 
function onFormSubmit(evt) { 
    evt.preventDefault(); 
 
	//Делаю анимацию загрузки видимой 
    var loader = document.querySelector('#processLoadingWrapper'); 
    loader.classList.remove('d-none'); 
 
	//В это время типа происходят всякие процессы 
    sleep(2000); 
     
     
	//Скрываю анимацию загрузки 
    loader.classList.add('d-none'); 
} 
 
document.getElementById('myForm').addEventListener('submit', onFormSubmit);

.d-none{ 
  display: none!important; 
}

<form id="myForm"> 
  <input type="text" name="name"> 
  <button type="submit">Отправить</button> 
</form> 
 
<div class="d-none" id="processLoadingWrapper"> 
  Тут анимация загрузки 
</div>

Мне нужно при отправке формы показать блок с анимацией загрузки. По умолчанию он скрыт. А после того как загрузка завершится, снова скрыть этот блок.

Смотрю у себя в коде - при нажатии на submit класс d-none пропадает, но блок не становится видимым. Если убрать этот класс из кода руками, то все ок. В чем тут дело?

UPD. Добавлю пример настоящего кода

function onFilterFormSubmit(evt) {
    evt.preventDefault();
    document.querySelector('#processLoadingWrapper').classList.remove('d-none');
    var formData = new FormData(evt.target);
    var fields = []
    for(var field of formData.entries()) {
        if(field[1] != '---' && field[1].length > 0){
           fields.push(field);
        }
    }

    var queryString = new URLSearchParams(fields).toString();
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/ajax-tires/?' + queryString, false);
    xhr.send(formData);
    if (xhr.status != 200) {
      console.log( xhr.status + ': ' + xhr.statusText );
    } else {
      document.querySelector('#main-content-wrapper').innerHTML = xhr.responseText;
      addProductToggleHandler();
    }
    document.querySelector('#processLoadingWrapper').classList.add('d-none');
}
document.addEventListener('DOMContentLoaded', function(){
    tireFilterForm.addEventListener('submit', onFilterFormSubmit);
});