OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make app load more async 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/13032/head
Michael Telatynski 2020-04-04 17:21:59 +01:00
parent a377ca7b85
commit 7b930da343
2 changed files with 51 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/vector/index.js
View File

@ -33,15 +33,23 @@ if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
}
// 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!");
// React depends on Map & Set which we check for using modernizr's es6collections
// if modernizr fails we may not have a functional react to show the error message.
// 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 {loadSkin, loadApp} = await import(
/* webpackChunkName: "init" */
/* webpackPreload: true */
"./init");
// 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();
await loadSkin();
await loadApp();
}
start().catch(err => {
// try show the error in React
console.error(err);
}).catch(err => {
// fall back to showing the error in an alert
console.error(err);
});

32
src/vector/init.ts
View File

@ -112,3 +112,35 @@ 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...");
const [sdk, skin] = await Promise.all([
import(
/* webpackChunkName: "matrix-react-sdk" */
/* webpackPreload: true */
"matrix-react-sdk"),
import(
/* webpackChunkName: "riot-web-component-index" */
/* webpackPreload: true */
"../component-index"),
]);
sdk.loadSkin(skin);
console.log("Skin loaded!");
}
export async function 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.
const module = await import(
/* webpackChunkName: "riot-web-app" */
/* webpackPreload: true */
"./app");
await module.loadApp();
}
// throw new Error("foobar");
window.Map = undefined;