Make skin-loading async to aid code-splitting

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

src/vector/app.js

@@ -38,10 +38,9 @@ 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, loadOlm} from "./init";
+import {loadConfig, preparePlatform, loadLanguage, loadOlm, loadTheme} from "./init";
 
 let lastLocationHashSet = null;
 
@@ -186,8 +185,13 @@ export async function loadApp() {
     preparePlatform();
     const platform = PlatformPeg.get();
 
-    // Load the config from the platform
-    const configError = await loadConfig();
+    let configError;
+    try {
+        // Load the config from the platform
+        await loadConfig();
+    } catch (e) {
+        configError = e;
+    }
 
     // Load language after loading config.json so that settingsDefaults.language can be applied
     await loadLanguage();
@@ -213,7 +217,7 @@ export async function loadApp() {
     }
 
     // as quickly as we possibly can, set a default theme...
-    await setTheme();
+    await loadTheme();
 
     // Now that we've loaded the theme (CSS), display the config syntax error if needed.
     if (configError && configError.err && configError.err instanceof SyntaxError) {

src/vector/index.js

@@ -35,13 +35,11 @@ if ('serviceWorker' in navigator) {
 
 // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
 // the SDK until we have to in imports.
-console.log("Loading skin...");
-import * as sdk from 'matrix-react-sdk';
-import * as skin from "../component-index";
-sdk.loadSkin(skin);
-console.log("Skin loaded!");
+import {loadSkin} from "./init";
+loadSkin().then(() => {
+    // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
+    // run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
+    // import and thus running before the skin can load.
+    require("./app").loadApp();
+});
 
-// Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
-// run on the components. We use `require` here to make sure webpack doesn't optimize this into an async
-// import and thus running before the skin can load.
-require("./app").loadApp();

src/vector/init.ts

@@ -19,14 +19,17 @@ limitations under the License.
 
 // @ts-ignore
 import olmWasmPath from "olm/olm.wasm";
-import Olm from 'olm';
+import Olm from "olm";
 
-import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
+import * as languageHandler from "matrix-react-sdk/src/languageHandler";
 import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
+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 * as sdk from "matrix-react-sdk";
+
 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";
 
 
 export function preparePlatform() {
@@ -40,21 +43,8 @@ export function preparePlatform() {
     }
 }
 
-export async function loadConfig(): Promise<Error | void> {
-    const platform = PlatformPeg.get();
-
-    let configJson;
-    try {
-        configJson = await platform.getConfig();
-    } catch (e) {
-        return e;
-    } finally {
-        // XXX: We call this twice, once here and once in MatrixChat as a prop. We call it here to ensure
-        // granular settings are loaded correctly and to avoid duplicating the override logic for the theme.
-        //
-        // Note: this isn't called twice for some wrappers, like the Jitsi wrapper.
-        SdkConfig.put(configJson || {});
-    }
+export async function loadConfig() {
+    SdkConfig.put(await PlatformPeg.get().getConfig());
 }
 
 export function loadOlm(): Promise<void> {
@@ -112,3 +102,21 @@ export async function loadLanguage() {
         console.error("Unable to set language", e);
     }
 }
+
+export async function loadSkin() {
+    // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
+    // the SDK until we have to in imports.
+    console.log("Loading skin...");
+    // import the skin async so that it doesn't execute potentially unsupported code
+    const skin = await import(
+        /* webpackChunkName: "riot-web-component-index" */
+        /* webpackPreload: true */
+        "../component-index");
+    await sdk.loadSkin(skin);
+    console.log("Skin loaded!");
+}
+
+export async function loadTheme() {
+    // as quickly as we possibly can, set a default theme...
+    await setTheme();
+}