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,6 +89,8 @@
       {/key}
     {/if}
   </Table>
+  {#key id}
+    <div in:fade={{ delay: 200, duration: 100 }}>
       <div class="pagination">
         <Pagination
           page={$search.pageNumber + 1}
@@ -97,6 +100,8 @@
           goToNextPage={$search.loading ? null : search.nextPage}
         />
       </div>
+    </div>
+  {/key}
 </div>
 
 <style>

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

@@ -118,6 +118,7 @@
     </div>
   </div>
   {#key tableId}
+    <div in:fade={{ delay: 200, duration: 100 }}>
       <Table
         {data}
         {schema}
@@ -135,6 +136,7 @@
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
       />
+    </div>
   {/key}
 </Layout>