I made a simple program in js that changes the aspect ratio of user uploaded images,I know that this is probably not the best way to do this sort of thing, but I think of it as practice.Here's the repo, and here's a live version.

There's a div with class .loading-screen that is supposed to cover the entire screen while the images are being processed, that div is initially hidden with a simple class that has a property of display : none;.

Once the user presses the "process" button for resizing the images, I try to remove the .hidden class from .loading-screen, but it doesn't remove it, it goes straight into processing the images, and once it's done it actually removes the class, but once the images have been finished processing, I add the class back again, so it's added and then removed immediately after. The basic flow relevant parts of the program is as follows :

const input = document.querySelector(".file-input");
const processButton = document.querySelector(".process");
let imageDivs = [];

input.addEventListener("change", () => {
  //load the images into the program, and store 
  //the resulting divs with images inside of the
  //imageDivs array
});

processButton.addEventListener("click", () => {
  const loadingScreen = document.querySelector(".loading-screen"); //this is the div that I want to cover the screen with

  loadingScreen.classList.remove("hidden"); //remove the '.hidden' class, so that it will cover the entire window

  let promises = [];
  
  for (let div of imageDivs) {
    let img = div.querySelector("img");

    //fit_image() draws the image in a canvas, and then 
    //returns a promise that resolves to the base64 data
    //of the canvas
    promises.push(fit_image(img));
  }

  Promise.all(promises).then(values => {
    loadingScreen.classList.add("hidden"); //hide this div once we are done processing the images

    //load the resized images into the program, etc...
  });
});

The problem is that loadingScreen.classList.remove("hidden") seems to run after the images have finished being processed, because if I remove the loadingScreen.classList.add("hidden") inside of the Promises.all() statement, the loadingScreen div appears after the images are done. How do I make it load the class before the images start processing?