title: JavaScript loader while updating multiple table rows content
body: <p>I would like to display loader during an operation that takes a while and hide after it is done. My code just loops through all table rows (about 2000) and update content in their cells.</p>
  
  <p>The problem is that this loader display does call doesn't fire before the code execution, so it doesn't show loader.</p>
  
  <pre><code>$('#loader').fadeIn();
  
  const $rows = $('.rows:checked');
  
  for (let i = 0; i &lt; $rows.length; ++i) {
    const id = $rows[i].dataset.productId;
    const $text = document.getElementById(`text-${id}`);
    const $value = document.getElementById(`value-${id}`);
  
    $value.textContent = value;
    $text.textContent = text;
  }
  
  return $('#loader').fadeOut();
  </code></pre>
  
  <p>I expect that the loader shows before the loop starts and will be hidden after loop finish.</p>