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}
@@ -98,6 +101,8 @@
         />
       </div>
     </div>
+  {/key}
+</div>
 
 <style>
   .pagination {

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>