Combine two async imports into one by way of skin.ts

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

src/vector/init.ts

@@ -123,17 +123,10 @@ export async function loadSkin() {
     // the SDK until we have to in imports.
     console.log("Loading skin...");
     // load these async so that its code is not executed immediately and we can catch any exceptions
-    const [sdk, skin] = await Promise.all([
+    const {sdk, skin} = await import(
-        import(
+        /* webpackChunkName: "skin" */
-            /* webpackChunkName: "matrix-react-sdk" */
         /* webpackPreload: true */
-            "matrix-react-sdk"),
+        "./skin");
-        import(
-            /* webpackChunkName: "riot-web-component-index" */
-            /* webpackPreload: true */
-            // @ts-ignore - this module is generated so may fail lint
-            "../component-index"),
-    ]);
     sdk.loadSkin(skin);
     console.log("Skin loaded!");
 }

src/vector/skin.ts

@@ -0,0 +1,22 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as sdk from "matrix-react-sdk";
+// @ts-ignore - this module is generated so may fail lint
+import * as skin from "../component-index";
+
+// we re-export here so that we can async-load this one file and webpack will bundle them together.
+export {sdk, skin};