Add transitions to data UI tables to improve smoothness and prevent stuttering and flashing on loading

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">
+  {#key id}
-    <Pagination
+    <div in:fade={{ delay: 200, duration: 100 }}>
-      page={$search.pageNumber + 1}
+      <div class="pagination">
-      hasPrevPage={$search.hasPrevPage}
+        <Pagination
-      hasNextPage={$search.hasNextPage}
+          page={$search.pageNumber + 1}
-      goToPrevPage={$search.loading ? null : search.prevPage}
+          hasPrevPage={$search.hasPrevPage}
-      goToNextPage={$search.loading ? null : search.nextPage}
+          hasNextPage={$search.hasNextPage}
-    />
+          goToPrevPage={$search.loading ? null : search.prevPage}
-  </div>
+          goToNextPage={$search.loading ? null : search.nextPage}
+        />
+      </div>
+    </div>
+  {/key}
 </div>
 
 <style>

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -118,23 +118,25 @@
     </div>
   </div>
   {#key tableId}
-    <Table
+    <div in:fade={{ delay: 200, duration: 100 }}>
-      {data}
+      <Table
-      {schema}
+        {data}
-      {loading}
+        {schema}
-      {customRenderers}
+        {loading}
-      {rowCount}
+        {customRenderers}
-      {disableSorting}
+        {rowCount}
-      bind:selectedRows
+        {disableSorting}
-      allowSelectRows={allowEditing && !isUsersTable}
+        bind:selectedRows
-      allowEditRows={allowEditing}
+        allowSelectRows={allowEditing && !isUsersTable}
-      allowEditColumns={allowEditing && isInternal}
+        allowEditRows={allowEditing}
-      showAutoColumns={!hideAutocolumns}
+        allowEditColumns={allowEditing && isInternal}
-      on:editcolumn={e => editColumn(e.detail)}
+        showAutoColumns={!hideAutocolumns}
-      on:editrow={e => editRow(e.detail)}
+        on:editcolumn={e => editColumn(e.detail)}
-      on:clickrelationship={e => selectRelationship(e.detail)}
+        on:editrow={e => editRow(e.detail)}
-      on:sort
+        on:clickrelationship={e => selectRelationship(e.detail)}
-    />
+        on:sort
+      />
+    </div>
   {/key}
 </Layout>