From a7f856227cf1bd2f3878103d89c47f66941fc35c Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Thu, 11 Oct 2018 15:57:58 -0400
Subject: [PATCH] preload fonts
---
src/containers/gui.jsx | 47 +++++++++++++++++++++++++++++++-----------
1 file changed, 35 insertions(+), 12 deletions(-)
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 6ef14439b..44f77c537 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -4,6 +4,7 @@ import React from 'react';
import VM from 'scratch-vm';
import {connect} from 'react-redux';
import ReactModal from 'react-modal';
+import bindAll from 'lodash.bindall';
import ErrorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
import {openExtensionLibrary} from '../reducers/modals';
@@ -28,6 +29,9 @@ import GUIComponent from '../components/gui/gui.jsx';
class GUI extends React.Component {
constructor (props) {
super(props);
+ bindAll(this, [
+ 'loadProject'
+ ]);
this.state = {
loading: !props.vm.initialized,
loadingError: false,
@@ -42,19 +46,24 @@ class GUI extends React.Component {
if (this.props.vm.initialized) return;
this.audioEngine = new AudioEngine();
this.props.vm.attachAudioEngine(this.audioEngine);
- this.props.vm.loadProject(this.props.projectData)
- .then(() => {
- this.setState({loading: false}, () => {
- this.props.vm.setCompatibilityMode(true);
- this.props.vm.start();
- });
- })
- .catch(e => {
- // Need to catch this error and update component state so that
- // error page gets rendered if project failed to load
- this.setState({loadingError: true, errorMessage: e});
- });
this.props.vm.initialized = true;
+ const fontPromises = [];
+ if (document.fonts && document.fonts.values.length) {
+ for (const fontFace of document.fonts.values()) {
+ fontPromises.push(fontFace.loaded);
+ fontFace.load();
+ }
+ }
+
+ if (document.readyState === 'complete') {
+ Promise.all(fontPromises).then(this.loadProject);
+ } else {
+ document.onreadystatechange = () => {
+ if (document.readyState !== 'complete') return;
+ document.onreadystatechange = null;
+ Promise.all(fontPromises).then(this.loadProject);
+ };
+ }
}
componentWillReceiveProps (nextProps) {
if (this.props.projectData !== nextProps.projectData) {
@@ -74,6 +83,20 @@ class GUI extends React.Component {
this.props.onUpdateReduxProjectTitle(nextProps.projectTitle);
}
}
+ loadProject () {
+ return this.props.vm.loadProject(this.props.projectData)
+ .then(() => {
+ this.setState({loading: false}, () => {
+ this.props.vm.setCompatibilityMode(true);
+ this.props.vm.start();
+ });
+ })
+ .catch(e => {
+ // Need to catch this error and update component state so that
+ // error page gets rendered if project failed to load
+ this.setState({loadingError: true, errorMessage: e});
+ });
+ }
render () {
if (this.state.loadingError) {
throw new Error(
--
GitLab