From 4b540061c7c306c374fc7b99add479798dd6631d Mon Sep 17 00:00:00 2001
From: bloodearnest <simon.davy@thedatalab.org>
Date: Tue, 12 Mar 2024 09:48:35 +0000
Subject: [PATCH] Render table with display: none, then show.

This improves the render time for large tables, as it doesn't need to
keep resizing the displayed table as its parsed.
---
 airlock/templates/file_browser/csv.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/airlock/templates/file_browser/csv.html b/airlock/templates/file_browser/csv.html
index 1fbda1195..112e49b14 100644
--- a/airlock/templates/file_browser/csv.html
+++ b/airlock/templates/file_browser/csv.html
@@ -1,7 +1,8 @@
 {% load airlocktags %}
 {% as_csv_data contents as csv_data %}
-<div class="inline-block min-w-full align-middle max-w-full">
-  <table class="datatable">
+<div id="csvtable" class="inline-block min-w-full align-middle max-w-full">
+  <p class="spinner">Loading table data...</p>
+  <table class="datatable" style="display: none">
     <thead class="bg-slate-200" id="csvTable">
       <tr>
         {% for header in csv_data.headers %}
@@ -20,3 +21,8 @@
     </tbody>
   </table>
 </div>
+
+<script type="text/javascript">
+    document.querySelector("#csvtable p.spinner").style.display = "none";
+    document.querySelector("#csvtable table.datatable").style.display = "table";
+</script>