Animation works on Chrome but not Safari

Issue

When processing an item upload, my js script enables an animation to load and a timer to start and update. On safari, both elements do not refresh as the website slowly uploads the file and redirects to "/upload". On Chrome, both elements refresh perfectly. I'm pretty sure it's an issue with how the page is slowly being redirected, as the js is supposed to be updated during that process. The code is listed below. Thanks for any help!

Upload Form

// Load function

var loadingIcon = document.querySelector('.load');
loadingIcon.style.display = 'flex';
loadingIcon.classList.add('spin-animation');

var time = 0;
var interval = setInterval(function() {
  time += 0.01;
  timer.textContent = time.toFixed(2) + " seconds";
}, 10);

<form method="post" enctype="multipart/form-data" action="/upload">
  <br>
  <div class="file-upload">
    <label for="upload" class="file-upload">Upload</label>
    <input type="file" name="pdf-file" class="file-upload" id="upload">
  </div>

  <h1 class="text-timer" id="timer"></h1>

  <br><br>
  <button type="submit" onclick="load()">Submit</button>
</form>

Solution

For me it works on safari, maybe you have to listen for the submit event instead of click ?

document.querySelector("#form").addEventListener("submit", (e) => load(e))

function load(e) {
  var loadingIcon = document.querySelector('.load');
  var timer = document.querySelector('#timer');
  loadingIcon.classList.add('spin-animation');

  var time = 0;
  var interval = setInterval(() => {
    time += 0.01;
    timer.innerText = time.toFixed(2) + " seconds";
  }, 10);
}

 .load {
   border-radius: 50%;
   border: 0.25rem solid #D3D3D3;
   border-top-color: #000;
   width: 80px;
   height: 80px;
   display: none;
 }

 .spin-animation {
   display:flex;
   -webkit-animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
 }

 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }

   100% {
     -webkit-transform: rotate(360deg);
   }
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

<form method="post" id="form" enctype="multipart/form-data" action="/upload">
  <br>
  <div class="file-upload">
    <label for="upload" class="file-upload">Upload</label>
    <input type="file" name="pdf-file" class="file-upload" id="upload">
  </div>
  <div class="load"></div>
  <h1 class="text-timer" id="timer">timer</h1>

  <br><br>
  <button type="submit">Submit</button>
</form>

Answered By - Kokodoko