From 873ef9952710dc30d22656ff90547c4b0ced75f8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 29 Sep 2021 10:33:55 +0100
Subject: [PATCH] Add transitions to data UI tables to improve smoothness and
 prevent stuttering and flashing on loading

---
 .../backend/DataTable/DataTable.svelte        | 23 +++++++-----
 .../components/backend/DataTable/Table.svelte | 36 ++++++++++---------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 64762d5db2..aa7241b62a 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { fade } from "svelte/transition"
   import { tables } from "stores/backend"
   import CreateRowButton from "./buttons/CreateRowButton.svelte"
   import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
@@ -88,15 +89,19 @@
       {/key}
     {/if}
   </Table>
-  <div class="pagination">
-    <Pagination
-      page={$search.pageNumber + 1}
-      hasPrevPage={$search.hasPrevPage}
-      hasNextPage={$search.hasNextPage}
-      goToPrevPage={$search.loading ? null : search.prevPage}
-      goToNextPage={$search.loading ? null : search.nextPage}
-    />
-  </div>
+  {#key id}
+    <div in:fade={{ delay: 200, duration: 100 }}>
+      <div class="pagination">
+        <Pagination
+          page={$search.pageNumber + 1}
+          hasPrevPage={$search.hasPrevPage}
+          hasNextPage={$search.hasNextPage}
+          goToPrevPage={$search.loading ? null : search.prevPage}
+          goToNextPage={$search.loading ? null : search.nextPage}
+        />
+      </div>
+    </div>
+  {/key}
 </div>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 38d580e273..c4658fff7b 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -118,23 +118,25 @@
     </div>
   </div>
   {#key tableId}
-    <Table
-      {data}
-      {schema}
-      {loading}
-      {customRenderers}
-      {rowCount}
-      {disableSorting}
-      bind:selectedRows
-      allowSelectRows={allowEditing && !isUsersTable}
-      allowEditRows={allowEditing}
-      allowEditColumns={allowEditing && isInternal}
-      showAutoColumns={!hideAutocolumns}
-      on:editcolumn={e => editColumn(e.detail)}
-      on:editrow={e => editRow(e.detail)}
-      on:clickrelationship={e => selectRelationship(e.detail)}
-      on:sort
-    />
+    <div in:fade={{ delay: 200, duration: 100 }}>
+      <Table
+        {data}
+        {schema}
+        {loading}
+        {customRenderers}
+        {rowCount}
+        {disableSorting}
+        bind:selectedRows
+        allowSelectRows={allowEditing && !isUsersTable}
+        allowEditRows={allowEditing}
+        allowEditColumns={allowEditing && isInternal}
+        showAutoColumns={!hideAutocolumns}
+        on:editcolumn={e => editColumn(e.detail)}
+        on:editrow={e => editRow(e.detail)}
+        on:clickrelationship={e => selectRelationship(e.detail)}
+        on:sort
+      />
+    </div>
   {/key}
 </Layout>