jQuery Execution Time and SweetAlert Loading (Project Specific Problem)

I've been working on a data transformation project. I've had success with the code execution when dealing with small data sets. However, when working with larger data sets, the JavaScript execution time has become a bit of an issue. For instance, processing 15,000 records can take around 4 to 5 seconds. This can be problematic because users may become impatient if they don't see any progress, leading them to repeatedly press the button.

To address this issue, I considered implementing a loader to indicate that the system is actively processing the user's request. So, I came up with something like this:

  $("#optDuplicateCol").click(function(){
    
   if(verifyColumnSelection()){
    showSweetAlertLoader();
     // Get references to various elements in the table
    var q_table = $(".q-table");
    var q_table_header_row =$("#q_table_header_row");
    var selectedHeaderTitle = $(".q-header-selected").text();
    var q_table_tbody = $("#q_table_tbody");
    // Find selected TD elements and extract their data
    var selectedTds = q_table.find('td.q-col-selected');
    var dataArray = []; 
    selectedTds.each(function() {
      var qTableDataValue = $(this).find('.q-table-data').text();
      dataArray.push(qTableDataValue.trim());
    });
     // Append duplicated column data to each table row
    q_table_tbody.find('tr').each(function(index) {
         var tdHtml = "<td><div class='q-table-data'>" + dataArray[index] + "</div></td>";
         $(this).append(tdHtml);
     });
     // Add a header for the copied column
     copiedColHeader="<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>"+selectedHeaderTitle+" - Copy</th>";
       q_table_header_row.append(copiedColHeader);
       closeSweetAlertLoader();
   }
  
  });

The Problem is that SweetAlert just flickers for a milliseconds and disappears and this happens when Column is done being duplicated

So far my attempt to solve the problem is this

$("#optDuplicateCol").click(function () {
  if (verifyColumnSelection()) {
    showSweetAlertLoader()
      .then(() => DulicateCols())
      .then(() => {
        closeSweetAlertLoader();
        // Other code to run after the operation is complete
      })
      .catch(error => {
        console.error(error);
        closeSweetAlertLoader();
        // Handle errors
      });
  }
});

  async function DulicateCols() {
  if (verifyColumnSelection()) {
   
    // Get references to various elements in the table
    var q_table = $(".q-table");
    var q_table_header_row = $("#q_table_header_row");
    var selectedHeaderTitle = $(".q-header-selected").text();
    var q_table_tbody = $("#q_table_tbody");
    // Find selected TD elements and extract their data
    var selectedTds = q_table.find('td.q-col-selected');
    var dataArray = [];
    selectedTds.each(function () {
      var qTableDataValue = $(this).find('.q-table-data').text();
      dataArray.push(qTableDataValue.trim());
    });
    // Append duplicated column data to each table row
    await Promise.all(
      q_table_tbody.find('tr').map(async function (index) {
        var tdHtml = "<td><div class='q-table-data'>" + dataArray[index] + "</div></td>";
        $(this).append(tdHtml);
      })
    );
    // Add a header for the copied column
    copiedColHeader = "<th scope='col' class='q-table-data-header' onclick='handleColumnSelection(this)'>" + selectedHeaderTitle + " - Copy</th>";
    q_table_header_row.append(copiedColHeader);
   
  }
}

  function showSweetAlertLoader() {
  return new Promise(resolve => {
    Swal.fire({
      title: 'Loading...',
      allowEscapeKey: false,
      allowOutsideClick: false,
      didOpen: () => {
        // Additional setup if needed
        resolve(); // Resolve the Promise when the Sweet Alert is ready
      },
    });
  });
}


function closeSweetAlertLoader() {
    Swal.close();
}