allow to open collections page in new tab on middle click and minor flickering improvements

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-OxsdchXY.js"></script>
+  <script type="module" crossorigin src="./assets/index-_5OW9owr.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
   <link rel="stylesheet" crossorigin href="./assets/index-BLIFQr7L.css">
 </head>

ui/src/collections/collectionsSidebar.js

@@ -94,9 +94,12 @@ export function collectionsSidebar() {
                     ),
                     t.button(
                         {
-                            hidden: () => app.store.isLoadingCollections,
                             type: "button",
-                            className: "btn sm circle transparent secondary link-faded",
+                            disabled: () => app.store.isLoadingCollections,
+                            className: () =>
+                                `btn sm circle transparent secondary link-faded ${
+                                    app.store.isLoadingCollections ? "loading" : ""
+                                }`,
                             ariaDescription: app.attrs.tooltip("Collections overview", "left"),
                             onclick: () => app.modals.openCollectionsOverview(),
                         },
@@ -125,11 +128,13 @@ export function collectionsSidebar() {
                 }),
             );
         },
+        // show the standalone loader only when there are no other collections loaded
         () => {
-            if (app.store.isLoadingCollections) {
+            if (app.store.isLoadingCollections && !data.filteredCollections.length) {
                 return t.div({ className: "sidebar-content txt-center" }, t.span({ className: "loader sm" }));
             }
-
+        },
+        () => {
             return [
                 t.nav(
                     {
@@ -208,7 +213,14 @@ function collectionItem(collection, data) {
             className: () =>
                 `nav-item responsive-close ${collection.id == app.store.activeCollection?.id ? "active" : ""}`,
             title: () => collection.name,
-            onclick: () => app.store.activeCollection = collection.name,
+            onauxclick: (e) => {
+                e.preventDefault();
+                window.open(`#/collections?collection=${collection.name}`, "_blank", "noreferrer,noopener");
+            },
+            onclick: (e) => {
+                e.preventDefault();
+                app.store.activeCollection = collection.name;
+            },
         },
         t.i({
             className: () => app.collectionTypes[collection.type]?.icon || app.utils.fallbackCollectionIcon,

ui/src/store.js

@@ -179,12 +179,18 @@ window.app.store = store({
         app.store.isLoadingCollections = true;
 
         try {
-            const [resultScaffolds, resultCollections] = await Promise.all([
+            let [resultScaffolds, resultCollections] = await Promise.all([
                 app.pb.collections.getScaffolds({ requestKey: "appStore.loadCollections.getScaffolds" }),
                 app.pb.collections.getFullList({ requestKey: "appStore.loadCollections.getFullList" }),
             ]);
 
-            app.store.collections = app.utils.sortedCollectionsByType(resultCollections);
+            resultCollections = app.utils.sortedCollectionsByType(resultCollections);
+
+            // replace only if there are changes to minimize flickering
+            if (JSON.stringify(app.store.collections) != JSON.stringify(resultCollections)) {
+                app.store.collections = resultCollections;
+            }
+
             app.store.collectionScaffolds = resultScaffolds;
             app.store._activeCollectionIdOrName = activeIdOrName || app.store._activeCollectionIdOrName
                 || app.store.collections[0]?.id || "";