mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 20:38:55 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make app load more async

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
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'); 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 // React depends on Map & Set which we check for using modernizr's es6collections
// the SDK until we have to in imports. // if modernizr fails we may not have a functional react to show the error message.
console.log("Loading skin..."); // try in react but fallback to an `alert`
import * as sdk from 'matrix-react-sdk'; async function start() {
import * as skin from "../component-index"; // load init.ts async so that its code is not executed immediately and we can catch any exceptions
sdk.loadSkin(skin); const {loadSkin, loadApp} = await import(
console.log("Skin loaded!"); /* 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 await loadSkin();
// run on the components. We use `require` here to make sure webpack doesn't optimize this into an async await loadApp();
// import and thus running before the skin can load. }
require("./app").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); 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;