reorder records list watchers and cancel prev count requests

ui/dist/index.html

@@ -13,7 +13,7 @@
 
     <!-- prism -->
     <script src="./libs/prism/prism.js" data-manual></script>
-  <script type="module" crossorigin src="./assets/index-rhnmwylN.js"></script>
+  <script type="module" crossorigin src="./assets/index-C-GOpFNn.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
   <link rel="stylesheet" crossorigin href="./assets/index-ltAYvB1J.css">
 </head>

ui/src/collections/otpAccordion.js

@@ -69,13 +69,15 @@ export function otpAccordion(collection) {
                     }),
                     () => {
                         if (!data.isSuperusers) {
-                            return
+                            return;
                         }
 
                         return t.i({
                             className: "ri-information-line link-hint",
-                            ariaDescription: app.attrs.tooltip("Superusers can have OTP only as part of Two-factor authentication."),
+                            ariaDescription: app.attrs.tooltip(
-                        })
+                                "Superusers can have OTP only as part of Two-factor authentication.",
+                            ),
+                        });
                     },
                 ),
             ),

ui/src/collections/pageCollections.js

@@ -5,6 +5,7 @@ const FILTER_QUERY_KEY = "filter";
 const COLLECTION_QUERY_KEY = "collection";
 const RECORD_QUERY_KEY = "record";
 const LAST_ACTIVE_STORAGE_KEY = "pbLastActiveCollection";
+const TOTAL_COUNT_REQUEST_KEY = "recordsTotalCountRequest";
 
 export function pageCollections(route) {
     app.store.activeCollection = route.query[COLLECTION_QUERY_KEY]?.[0]
@@ -33,6 +34,7 @@ export function pageCollections(route) {
             );
 
             const result = await app.pb.collection(app.store.activeCollection.name).getList(1, 1, {
+                requestKey: TOTAL_COUNT_REQUEST_KEY,
                 filter: normalizedFilter,
                 fields: "id",
             });
@@ -182,6 +184,8 @@ export function pageCollections(route) {
                 }
             },
             onunmount: () => {
+                app.pb.cancelRequest(TOTAL_COUNT_REQUEST_KEY);
+
                 watchers.forEach((w) => w?.unwatch());
 
                 for (let event in documentEvents) {

ui/src/records/recordFileThumb.js

@@ -16,6 +16,7 @@ function semaphoreAdd(fn) {
         semaphoreProcess();
     }
 
+    // release func that must be called manually after done with the loading
     return () => {
         semaphore.pending.delete(fn);
         semaphore.processing.delete(fn);

ui/src/records/recordsList.js

@@ -240,18 +240,6 @@ window.app.components.recordsList = function(propsArg = {}) {
         return field.hidden;
     }
 
-    // trigger load before mount and on props change
-    watchers.push(
-        watch(
-            () => JSON.stringify([props.collection?.id, props.filter, props.sort, props.reset]),
-            (newVal, oldVal) => {
-                if (newVal != oldVal) {
-                    loadRecords(true);
-                }
-            },
-        ),
-    );
-
     let deleteRefreshTimeoutId;
 
     const documentEvents = {
@@ -302,16 +290,45 @@ window.app.components.recordsList = function(propsArg = {}) {
                 }
 
                 watchers.push(
-                    watch(() => props.collection?.id, (newId, oldId) => {
+                    watch(
-                        data.columnsPreferences = app.utils.getLocalHistory(
+                        () => props.collection?.id,
-                            app.consts.COLUMNS_STORAGE_PREFIX + newId,
+                        (newId, oldId) => {
-                            {},
+                            data.columnsPreferences = app.utils.getLocalHistory(
-                        );
+                                app.consts.COLUMNS_STORAGE_PREFIX + newId,
+                                {},
+                            );
 
-                        if (oldId && oldId != newId) {
+                            if (oldId && oldId != newId) {
-                            clearList();
+                                clearList();
-                        }
+                            }
-                    }),
+                        },
+                    ),
+                );
+
+                // trigger load on props change
+                watchers.push(
+                    watch(
+                        () =>
+                            (props.collection?.id || "") + (props.filter || "") + (props.sort || "")
+                            + (props.reset || ""),
+                        (newVal, oldVal) => {
+                            if (newVal != oldVal) {
+                                loadRecords(true);
+                            }
+                        },
+                    ),
+                );
+
+                // always scroll to top on first page load
+                watchers.push(
+                    watch(
+                        () => data.lastPage,
+                        (page) => {
+                            if (page == 1 && el) {
+                                el.scrollTop = 0;
+                            }
+                        },
+                    ),
                 );
 
                 watchers.push(
@@ -327,17 +344,6 @@ window.app.components.recordsList = function(propsArg = {}) {
                         },
                     ),
                 );
-
-                watchers.push(
-                    watch(
-                        () => data.lastPage,
-                        (page) => {
-                            if (page == 1 && el) {
-                                el.scrollTop = 0;
-                            }
-                        },
-                    ),
-                );
             },
             onunmount: () => {
                 app.pb.cancelRequest(uniqueId);