parallel load language and theme

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/vector/app.js

@@ -37,10 +37,8 @@ import {parseQs, parseQsFromFragment} from './url_utils';
 
 import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-import {setTheme} from "matrix-react-sdk/src/theme";
 
 import CallHandler from 'matrix-react-sdk/src/CallHandler';
-import {loadConfig, preparePlatform, loadLanguage} from "./init";
 
 let lastLocationHashSet = null;
 
@@ -128,7 +126,7 @@ function onTokenLoginCompleted() {
     window.location.href = formatted;
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error) {
+export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error|void) {
     // XXX: the way we pass the path to the worker script from webpack via html in body's dataset is a hack
     // but alternatives seem to require changing the interface to passing Workers to js-sdk
     const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
@@ -146,14 +144,8 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean, configErro
 
     const platform = PlatformPeg.get();
 
-    // Load language after loading config.json so that settingsDefaults.language can be applied
-    await loadLanguage();
-
     const params = parseQs(window.location);
 
-    // as quickly as we possibly can, set a default theme...
-    await setTheme();
-
     // Now that we've loaded the theme (CSS), display the config syntax error if needed.
     if (configError && configError.err && configError.err instanceof SyntaxError) {
         const errorMessage = (

src/vector/index.ts

@@ -21,8 +21,6 @@ limitations under the License.
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js
-import {loadConfig, preparePlatform} from "./init";
-
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 
@@ -83,7 +81,16 @@ function checkBrowserFeatures() {
 // try in react but fallback to an `alert`
 async function start() {
     // load init.ts async so that its code is not executed immediately and we can catch any exceptions
-    const {rageshakePromise, preparePlatform, loadOlm, loadSkin, loadApp} = await import(
+    const {
+        rageshakePromise,
+        preparePlatform,
+        loadOlm,
+        loadConfig,
+        loadSkin,
+        loadLanguage,
+        loadTheme,
+        loadApp,
+    } = await import(
         /* webpackChunkName: "init" */
         /* webpackPreload: true */
         "./init");
@@ -110,11 +117,11 @@ async function start() {
         }
     }
 
+    const loadOlmPromise = loadOlm();
     // set the platform for react sdk
     preparePlatform();
     // load config requires the platform to be ready
     const loadConfigPromise = loadConfig();
-    const loadOlmPromise = loadOlm();
 
     await loadSkin();
 
@@ -123,11 +130,17 @@ async function start() {
         acceptBrowser = Boolean(window.localStorage.getItem("mx_accepts_unsupported_browser"));
     }
 
+    // await config here
+    const configError = await loadConfigPromise;
+    // Load language after loading config.json so that settingsDefaults.language can be applied
+    const loadLanguagePromise = loadLanguage();
+    // as quickly as we possibly can, set a default theme...
+    const loadThemePromise = loadTheme();
+
     // await things starting successfully
     await loadOlmPromise;
-
+    await loadThemePromise;
-
+    await loadLanguagePromise;
-    const configError = await loadConfigPromise;
 
     // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
     // run on the components.

src/vector/init.ts

@@ -28,6 +28,7 @@ import ElectronPlatform from "./platform/ElectronPlatform";
 import WebPlatform from "./platform/WebPlatform";
 import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
+import {setTheme} from "matrix-react-sdk/src/theme";
 
 import { initRageshake } from "./rageshakesetup";
 
@@ -138,7 +139,11 @@ export async function loadSkin() {
     console.log("Skin loaded!");
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error) {
+export async function loadTheme() {
+    setTheme();
+}
+
+export async function loadApp(fragParams: {}, acceptBrowser: boolean, configError: Error|void) {
     // load app.js async so that its code is not executed immediately and we can catch any exceptions
     const module = await import(
         /* webpackChunkName: "riot-web-app" */