Performance : Prevent DOM reflow on import preview

Currently, when the import preview is huge (i.e. thousands of rows), it forces the browser to do substantial DOM reflow. This greatly slows down the browser as it tries to resize the preview table (and the whole page) over and over again as it prints new DOM elements.

To improve performance, you can set table.import-preview’s display to none first, and then set it to table later on after the whole table has been loaded.

That is, add this before the table is loaded

<style>
  table.import-preview {
    display:none;
  }
</style>

(or add this in import.css), and then add at the end of import_export/import.html

  <script type="text/javascript">
    (function() {
      var import_previews = document.querySelectorAll('table.import-preview')
      for (var i = 0; i < import_previews.length; i++) {
        import_previews[i].style.display = 'table'
      }
    })();
  </script>

[franz-see]

@bmihelac i’ll try that out and will let you know how it goes 😃 thanks !

[franz-see]

@andrewgy8 the down side is if javascript is disabled, then the preview will never show up 😃