title: Javascript busy overlay not showing when set to show before long DOM manipulation function
body: <p>I have a large datatable (<a href="https://datatables.net/" rel="nofollow noreferrer">https://datatables.net/</a>) which I need to recreate after a button is clicked. This recreation takes a couple of seconds, so I would like to display a 'busy-overlay' when this is being done.</p>
  
  <p>Problem is that the DOM does not get updated (i.e. the overlay doesn't show up) before it freezes on (re)processing the table. After it's done, it briefly shows up and disappears.</p>
  
  <pre><code>function addColumn(filterToggle, propertyName, table) {
      $('#ResultsTable').closest('.card').find('.overlay').fadeIn();    
      table.destroy();
      //do stuff    
      table = getProjectsTable();
      //do more stuff
      $(overlay).fadeOut();
  }
  </code></pre>
  
  <p>I suppose I would need to wait a little bit so that the overlay is actually made visible before continuing the execution - but how? </p>
  
  <p>Most of the questions about 'javascript 'sleep()' method say its a hacky hacky most of the times...</p>