Improved UploadModal state handling during initialization.

Track whether datatypes and genomes have been set and use the LoadingSpan component to display information about this wait if the component is not yet ready.

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;