Slow jquery-ui dialog with progress bar

Example of jquery UI with a slow dialog box. This seems to be a problem with then dialog is wrapped around a large HTML blob, in this case a table with thousands of rows.

by edharcourt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="uploadprogress"></div>

JavaScript

$(function() {  
    
  
  // create a big table with two columns. This is very fast.
  var table = "<div id='mytable'><table>"
  for (var i = 0; i < 2000; i++) {
    table += "<tr><td>" + i + "</td><td>" + i*i + "</td><\/tr>";
  }
  table += "</table></div>";
  
  console.log("Done generating table");
 
  $(table).dialog({
      modal: true,
      width: 100,
      height: 400,
      resizeable: true,
      title: "Data Table",
      buttons: {
        "OK": function() { $(this).remove(); }
      }
  });
  
});