Load components after config has been pulled

src/App.vue

@@ -3,8 +3,8 @@
     <EditModeTopBanner v-if="isEditMode" />
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
-    <router-view />
-    <Footer :text="footerText" v-if="visibleComponents.footer" />
+    <router-view v-if="!isFetching" />
+    <Footer :text="footerText" v-if="visibleComponents.footer && !isFetching" />
   </div>
 </template>
 <script>
@@ -33,6 +33,7 @@ export default {
   data() {
     return {
       isLoading: true, // Set to false after mount complete
+      isFetching: true, // Set to false after the conf has been fetched
     };
   },
   watch: {
@@ -40,6 +41,9 @@ export default {
       // When in edit mode, show confirmation dialog on page exit
       window.onbeforeunload = isEditMode ? this.confirmExit : null;
     },
+    config() {
+      this.isFetching = false;
+    },
   },
   computed: {
     /* If the user has specified custom text for footer - get it */
@@ -69,9 +73,6 @@ export default {
       return this.$store.state.editMode;
     },
   },
-  created() {
-    this.$store.dispatch(Keys.INITIALIZE_CONFIG);
-  },
   methods: {
     /* Injects the users custom CSS as a style tag */
     injectCustomStyles(usersCss) {
@@ -135,7 +136,8 @@ export default {
     },
   },
   /* Basic initialization tasks on app load */
-  mounted() {
+  async mounted() {
+    await this.$store.dispatch(Keys.INITIALIZE_CONFIG); // Initialize config before moving on
     this.applyLanguage(); // Apply users local language
     this.hideSplash(); // Hide the splash screen, if visible
     if (this.appConfig.customCss) { // Inject users custom CSS, if present