records listing optimizations

ui/src/components/base/FormattedDate.svelte

@@ -1,14 +1,13 @@
 <script>
-    import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
-
     export let date = "";
+
+    // note: manual trim the ms without converting to DateTime
+    // to help improving the rendering performance in large data sets
+    let shortDate = date.length > 19 ? date.substring(0, 19) : date;
 </script>
 
 {#if date}
-    <span class="txt" use:tooltip={CommonHelper.formatToLocalDate(date) + " Local"}>
-        {CommonHelper.formatToUTCDate(date)} UTC
-    </span>
+    <span class="txt">{shortDate} UTC</span>
 {:else}
     <span class="txt txt-hint">N/A</span>
 {/if}

ui/src/components/records/RecordFieldCell.svelte

@@ -7,6 +7,12 @@
 
     export let record;
     export let field;
+
+    // rough text cut to avoid rendering large chunk of texts
+    function cutText(text) {
+        text = text || "";
+        return text.length > 200 ? text.substring(0, 200) : text;
+    }
 </script>
 
 <td class="col-type-{field.type} col-field-{field.name}">
@@ -28,7 +34,9 @@
     {:else if field.type === "date"}
         <FormattedDate date={record[field.name]} />
     {:else if field.type === "json"}
-        <span class="txt txt-ellipsis">{JSON.stringify(record[field.name])}</span>
+        <span class="txt txt-ellipsis">
+            {cutText(JSON.stringify(record[field.name]))}
+        </span>
     {:else if field.type === "select"}
         <div class="inline-flex">
             {#each CommonHelper.toArray(record[field.name]) as item}
@@ -50,8 +58,8 @@
             {/each}
         </div>
     {:else}
-        <span class="txt txt-ellipsis" title={record[field.name]}>
-            {record[field.name]}
+        <span class="txt txt-ellipsis" title={cutText(record[field.name])}>
+            {cutText(record[field.name])}
         </span>
     {/if}
 </td>

ui/src/components/records/RecordsList.svelte

@@ -23,8 +23,11 @@
     let isLoading = true;
     let isDeleting = false;
 
-    $: if (collection && collection.id && sort !== -1 && filter !== -1) {
+    $: if (collection?.id) {
         clearList();
+    }
+
+    $: if (collection?.id && sort !== -1 && filter !== -1) {
         load(1);
     }
 
@@ -43,16 +46,16 @@
 
         isLoading = true;
 
-        if (page <= 1) {
-            clearList();
-        }
-
         return ApiClient.records
             .getList(collection.id, page, 50, {
                 sort: sort,
                 filter: filter,
             })
             .then((result) => {
+                if (page <= 1) {
+                    clearList();
+                }
+
                 isLoading = false;
                 records = records.concat(result.items);
                 currentPage = result.page;
@@ -150,16 +153,20 @@
         <thead>
             <tr>
                 <th class="bulk-select-col min-width">
-                    <div class="form-field">
-                        <input
-                            type="checkbox"
-                            id="checkbox_0"
-                            disabled={!records.length}
-                            checked={areAllRecordsSelected}
-                            on:change={() => toggleSelectAllRecords()}
-                        />
-                        <label for="checkbox_0" />
-                    </div>
+                    {#if isLoading}
+                        <span class="loader loader-sm" />
+                    {:else}
+                        <div class="form-field">
+                            <input
+                                type="checkbox"
+                                id="checkbox_0"
+                                disabled={!records.length}
+                                checked={areAllRecordsSelected}
+                                on:change={() => toggleSelectAllRecords()}
+                            />
+                            <label for="checkbox_0" />
+                        </div>
+                    {/if}
                 </th>
                 <SortHeader class="col-type-text col-field-id" name="id" bind:sort>
                     <div class="col-header-content">

ui/src/scss/_table.scss

@@ -207,6 +207,7 @@ table {
     // states
     &.table-loading {
         pointer-events: none;
+        opacity: 0.7;
     }
 }
 
@@ -218,6 +219,7 @@ table {
     margin-left: calc(var(--baseSpacing) * -1);
     margin-right: calc(var(--baseSpacing) * -1);
     .bulk-select-col {
+        min-width: 70px;
         input[type="checkbox"] ~ label {
             opacity: 0.7;
         }