Merge pull request #9878 from mvdbeek/9869_backport

[20.05] Improved UploadModal state handling during initialization.

client/galaxy/scripts/components/Upload/UploadModal.vue

@@ -12,7 +12,7 @@
         <template v-slot:modal-header>
             <h4 class="title" tabindex="0">{{ title }}</h4>
         </template>
-        <b-tabs v-if="historyAvailable">
+        <b-tabs v-if="ready">
             <b-tab title="Regular" id="regular" button-id="tab-title-link-regular">
                 <default :app="this" :lazy-load-max="50" />
             </b-tab>
@@ -27,7 +27,7 @@
             </b-tab>
         </b-tabs>
         <div v-else>
-            Loading required information from Galaxy server.
+            <loading-span message="Loading required information from Galaxy server." />
         </div>
     </b-modal>
 </template>
@@ -44,6 +44,7 @@ import Composite from "./Composite";
 import Collection from "./Collection";
 import Default from "./Default";
 import RulesInput from "./RulesInput";
+import LoadingSpan from "components/LoadingSpan";
 
 Vue.use(BootstrapVue);
 
@@ -53,6 +54,7 @@ export default {
         Composite,
         Default,
         RulesInput,
+        LoadingSpan,
     },
     props: {
         modalStatic: {
@@ -101,6 +103,8 @@ export default {
             currentUser: null,
             listGenomes: [],
             listExtensions: [],
+            genomesSet: false,
+            extensionsSet: false,
         };
     },
     created: function () {
@@ -116,19 +120,26 @@ export default {
         // load extensions
         UploadUtils.getUploadDatatypes(
             (listExtensions) => {
+                this.extensionsSet = true;
                 this.listExtensions = listExtensions;
             },
-            this.datatypesDisableSuto,
+            this.datatypesDisableAuto,
             this.auto
         );
 
         // load genomes
         UploadUtils.getUploadGenomes((listGenomes) => {
+            this.genomesSet = true;
             this.listGenomes = listGenomes;
         }, this.defaultGenome);
 
         this.initStateWhenHistoryReady();
     },
+    computed: {
+        ready() {
+            return this.genomesSet && this.extensionsSet && this.historyAvailable;
+        },
+    },
     methods: {
         show() {
             this.modalShow = true;