parallel load language and theme

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-04-08 16:17:46 +01:00
parent 2c5664b76e
commit 719865c033
3 changed files with 27 additions and 17 deletions

View File

@ -37,10 +37,8 @@ import {parseQs, parseQsFromFragment} from './url_utils';
import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg'; import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
import SdkConfig from "matrix-react-sdk/src/SdkConfig"; 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 CallHandler from 'matrix-react-sdk/src/CallHandler';
import {loadConfig, preparePlatform, loadLanguage} from "./init";
let lastLocationHashSet = null; let lastLocationHashSet = null;
@ -128,7 +126,7 @@ function onTokenLoginCompleted() {
window.location.href = formatted; 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 // 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 // but alternatives seem to require changing the interface to passing Workers to js-sdk
const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript; const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
@ -146,14 +144,8 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean, configErro
const platform = PlatformPeg.get(); const platform = PlatformPeg.get();
// Load language after loading config.json so that settingsDefaults.language can be applied
await loadLanguage();
const params = parseQs(window.location); 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. // Now that we've loaded the theme (CSS), display the config syntax error if needed.
if (configError && configError.err && configError.err instanceof SyntaxError) { if (configError && configError.err && configError.err instanceof SyntaxError) {
const errorMessage = ( const errorMessage = (

View File

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

View File

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