records listing optimizations

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">