Promise.all([
    seperatingDMCM(),
    compileDirectMessage(),
    renderingResult(),
    addResultButtonListener(),
  ]);

I have a progress bar in my UI and I have 4 functions mentioned above each of which returns a Promise. I have a loop inside the first function seperatingDMCM(), that will handle all the my data. I want to increment the progress bar with each increment of the loop. Meaning each loop iteration should be async, so the UI will update and only afterwards the loop will iterate. When the loop has ended I want to return a promise so that the other functions will begin to execute. I am facing an issue that progress bar is not working as it suppose to and is immediately being invoked when seperatingDMCM() returns the promise () and not asynchronously. This progress bar is immediately being updated to 100% on the next page instead of live updates with small increment on the current page.

This is my updateUI function:

function startProgressBar(i, arr) {
  return new Promise((resolve) => {
    setTimeout(() => {
      i = (i * 100) / arr.length;
      console.log(i);
      let elem = document.getElementById("progressBar");
      if (i < 100) {
        elem.innerText = i + "%";
        elem.style.width = i + "%";
        elem.innerHTML = i + "%";
        resolve();
      }
    }, 0);
  });
}

This is my first function where I want to update the UI per loop iteration

function seperatingDMCM() {
  const contentType = "Content type";

  return new Promise((resolve) => {
    rowObject.forEach(async (row, index) => {
      const creatingInts = () => {
        console.log("CreatedInt at", index);
        row["Date created (UTC)"] = ExcelDateToJSDate(
          row["Date created (UTC)"]
        );
        if (
          row[contentType] !== "DM" &&
          row.hasOwnProperty("Falcon user name")
        ) {
          publicCommentsCount++;
          interaction = { row : row};
          compiledInteractions.push(interaction);
          interaction = {};
        } else {
          dmData.push(row);
        }
      };

      startProgressBar(index, rowObject).then(creatingInts());
    });
    quickSort(dmData, "Falcon URL");
    console.log("SORTED", dmData);

    console.log(workbook);
    console.log("Rows", rowObject);
    resolve();
  });
}