🧵 Small improvments to multi-config load ordering

src/App.vue

@@ -39,7 +39,6 @@ export default {
   data() {
     return {
       isLoading: true, // Set to false after mount complete
-      isFetching: true, // Set to false after the conf has been fetched
     };
   },
   watch: {
@@ -47,9 +46,6 @@ export default {
       // When in edit mode, show confirmation dialog on page exit
       window.onbeforeunload = isEditMode ? this.confirmExit : null;
     },
-    config() {
-      this.isFetching = false;
-    },
     /* Sync document title + description whenever route or loaded config changes */
     metaDeps: {
       handler() { syncPageMeta(this.$route, this.$store); },
@@ -84,8 +80,9 @@ export default {
     shouldShowSplash() {
       return (this.appConfig.showSplashScreen);
     },
-    config() {
-      return this.$store.state.config;
+    /* True until the root config has finished its initial load (or critically failed) */
+    isFetching() {
+      return !this.$store.state.rootConfig && !this.$store.state.criticalError;
     },
     /* Route-declared themes (e.g. 404) win over the user's saved theme */
     effectiveTheme() {
@@ -228,14 +225,13 @@ export default {
       return 'You may have unsaved edits. Are you sure you want to exit the page?';
     },
   },
-  /* Basic initialization tasks on app load */
-  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
-    this.applyCustomStyles(); // Apply custom CSS and external stylesheets
-    this.hideLoader(); // If initial placeholder still visible, hide it
-    welcomeMsg(); // Show message in console
+  /* Basic initialization tasks on app load. Config is already loaded by router.beforeEach. */
+  mounted() {
+    this.applyLanguage();
+    this.hideSplash();
+    this.applyCustomStyles();
+    this.hideLoader();
+    welcomeMsg();
   },
 };
 </script>

src/components/Configuration/CloudBackupRestore.vue

@@ -166,7 +166,14 @@ export default {
       localStorage.setItem(scope.APP_CONFIG, JSON.stringify(appConfig));
       localStorage.setItem(scope.PAGE_INFO, JSON.stringify(clean.pageInfo || {}));
       localStorage.setItem(scope.CONF_SECTIONS, JSON.stringify(clean.sections || []));
-      if (appConfig.theme) localStorage.setItem(scope.THEME, appConfig.theme);
+      const setOrClear = (key, value) => {
+        if (value) localStorage.setItem(key, value);
+        else localStorage.removeItem(key);
+      };
+      setOrClear(scope.THEME, appConfig.theme);
+      setOrClear(scope.LAYOUT, appConfig.layout);
+      setOrClear(scope.ICON_SIZE, appConfig.iconSize);
+      setOrClear(scope.LANGUAGE, appConfig.language);
       if (!isSubPage) {
         localStorage.setItem(localStorageKeys.CONF_PAGES, JSON.stringify(config.pages || []));
       }

src/components/Configuration/JsonEditor.vue

@@ -327,6 +327,7 @@ export default {
       const ok = await this.writeConfigToDisk(data);
       if (!ok) return;
       this.applyConfigToStore(data);
+      this.initialDoc = this.currentText();
     },
     onSaveLocally() {
       const data = this.parseCurrent();
@@ -335,6 +336,7 @@ export default {
       if (!confirm(this.$t('interactive-editor.menu.save-locally-warning'))) return;
       this.saveConfigLocally(data);
       this.applyConfigToStore(data);
+      this.initialDoc = this.currentText();
     },
     applyConfigToStore(data) {
       this.$store.dispatch(StoreKeys.APPLY_EDITED_CONFIG, data);

src/components/PageStrcture/CriticalError.vue

@@ -65,7 +65,7 @@ export default {
 @import '@/styles/media-queries.scss';
 .critical-error-wrap {
   position: absolute;
-  top: 40%;
+  top: 40vh;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 3;

src/components/Settings/LocalConfigWarning.vue

@@ -45,8 +45,7 @@ export default {
       this.shouldHide = true;
     },
     saveConfig() {
-      const localConfig = this.$store.state.config;
-      this.writeConfigToDisk(localConfig);
+      this.writeConfigToDisk(this.$store.state.configSource);
       this.shouldHide = true;
     },
     resetLocalConfig() {