Merge pull request #10557 from OlegZharkov/lib-race-hotfix

Data library fix races, show spinner on first load

client/src/components/LibraryFolder/LibraryFolder.vue

@@ -33,7 +33,11 @@
                 show-empty
             >
                 <template v-slot:empty>
-                    <div v-if="!search_text" class="empty-folder-message">
+                    <div v-if="isBusy" class="text-center my-2">
+                        <b-spinner class="align-middle"></b-spinner>
+                        <strong>Loading...</strong>
+                    </div>
+                    <div v-else class="empty-folder-message">
                         This folder is either empty or you do not have proper access permissions to see the contents. If
                         you expected something to show up please consult the
                         <a href="https://galaxyproject.org/data-libraries/#permissions" target="_blank">
@@ -297,7 +301,7 @@ export default {
         return {
             error: null,
             isBusy: false,
-            folder_metadata: null,
+            folder_metadata: {},
             currentPage: 1,
             fields: fields,
             selectMode: "multi",
@@ -312,16 +316,21 @@ export default {
             filterOn: [],
             search_text: "",
             isAllSelectedMode: false,
+            total_rows: 0,
             deselectedDatasets: [],
         };
     },
     computed: {
         parentFolder() {
-            const path = this.folder_metadata.full_path;
-            if (path.length === 1) {
-                return `${this.root}library/list/`;
+            if (this.folder_metadata && this.folder_metadata.full_path) {
+                const path = this.folder_metadata.full_path;
+                if (path.length === 1) {
+                    return `${this.root}library/list/`;
+                } else {
+                    return `${this.root}library/folders/${path[path.length - 2][0]}`;
+                }
             } else {
-                return `${this.root}library/folders/${path[path.length - 2][0]}`;
+                return false;
             }
         },
     },
@@ -364,6 +373,7 @@ export default {
         },
         updateSearchValue(value) {
             this.search_text = value;
+            this.folderContents = [];
             this.fetchFolderContents(this.include_deleted);
         },
         selectAllRenderedRows() {

client/src/components/LibraryFolder/SearchField.vue

@@ -6,7 +6,7 @@
             type="search"
             id="filterInput"
             placeholder="Search"
-            @keyup.enter="startSeach()"
+            @keyup.enter="startSearch()"
         />
     </b-input-group>
 </template>
@@ -21,7 +21,7 @@ export default {
         };
     },
     methods: {
-        startSeach() {
+        startSearch() {
             this.$emit("updateSearch", this.search);
             this.awaitingSearch = false;
         },
@@ -30,7 +30,7 @@ export default {
         search: function () {
             if (!this.awaitingSearch) {
                 setTimeout(() => {
-                    this.startSeach();
+                    this.startSearch();
                 }, 1000); // 1 sec delay
             }
             this.awaitingSearch = true;

client/src/components/LibraryFolder/TopToolbar/FolderTopBar.vue

@@ -229,11 +229,12 @@ export default {
         this.fetchExtAndGenomes();
     },
     mounted() {
-        new mod_path_bar.PathBar({
-            full_path: this.metadata.full_path,
-            id: this.folder_id,
-            parent_library_id: this.metadata.parent_library_id,
-        });
+        if (this.metadata.full_path)
+            new mod_path_bar.PathBar({
+                full_path: this.metadata.full_path,
+                id: this.folder_id,
+                parent_library_id: this.metadata.parent_library_id,
+            });
     },
     computed: {
         contains_file_or_folder: function () {