Merge pull request #3366 from fsih/preloadFonts

Preload fonts

Author: thisandagain

src/containers/gui.jsx

@@ -20,6 +20,7 @@ import {
     closeBackdropLibrary
 } from '../reducers/modals';
 
+import FontLoaderHOC from '../lib/font-loader-hoc.jsx';
 import ProjectFetcherHOC from '../lib/project-fetcher-hoc.jsx';
 import ProjectSaverHOC from '../lib/project-saver-hoc.jsx';
 import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
@@ -132,6 +133,7 @@ const ConnectedGUI = connect(
 // ability to compose reducers.
 const WrappedGui = compose(
     ErrorBoundaryHOC('Top Level App'),
+    FontLoaderHOC,
     ProjectFetcherHOC,
     ProjectSaverHOC,
     vmListenerHOC,

src/lib/font-loader-hoc.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+/* Higher Order Component to provide behavior for loading fonts.
+ * @param {React.Component} WrappedComponent component to receive fontsLoaded prop
+ * @returns {React.Component} component with font loading behavior
+ */
+const FontLoaderHOC = function (WrappedComponent) {
+    class FontLoaderComponent extends React.Component {
+        constructor (props) {
+            super(props);
+            this.state = {
+                fontsLoaded: false
+            };
+        }
+        componentDidMount () {
+            const getFontPromises = () => {
+                const fontPromises = [];
+                // Browsers that support the font loader interface have an iterable document.fonts.values()
+                // Firefox has a mocked out object that doesn't actually implement iterable, which is why
+                // the deep safety check is necessary.
+                if (document.fonts &&
+                    typeof document.fonts.values === 'function' &&
+                    typeof document.fonts.values()[Symbol.iterator] === 'function') {
+                    for (const fontFace of document.fonts.values()) {
+                        fontPromises.push(fontFace.loaded);
+                        fontFace.load();
+                    }
+                }
+                return fontPromises;
+            };
+            // Font promises must be gathered after the document is loaded, because on Mac Chrome, the promise
+            // objects get replaced and the old ones never resolve.
+            if (document.readyState === 'complete') {
+                Promise.all(getFontPromises()).then(() => {
+                    this.setState({fontsLoaded: true});
+                });
+            } else {
+                document.onreadystatechange = () => {
+                    if (document.readyState !== 'complete') return;
+                    document.onreadystatechange = null;
+                    Promise.all(getFontPromises()).then(() => {
+                        this.setState({fontsLoaded: true});
+                    });
+                };
+            }
+        }
+        render () {
+            return (
+                <WrappedComponent
+                    fontsLoaded={this.state.fontsLoaded}
+                    {...this.props}
+                />
+            );
+        }
+    }
+    return FontLoaderComponent;
+};
+
+export {
+    FontLoaderHOC as default
+};

src/lib/vm-manager-hoc.jsx

@@ -38,7 +38,10 @@ const vmManagerHOC = function (WrappedComponent) {
             this.props.vm.initialized = true;
         }
         componentDidUpdate (prevProps) {
-            if (this.props.isLoadingWithId && !prevProps.isLoadingWithId) {
+            // if project is in loading state, AND fonts are loaded,
+            // and they weren't both that way until now... load project!
+            if (this.props.isLoadingWithId && this.props.fontsLoaded &&
+                (!prevProps.isLoadingWithId || !prevProps.fontsLoaded)) {
                 this.loadProject(this.props.projectData, this.props.loadingState);
             }
         }
@@ -56,6 +59,7 @@ const vmManagerHOC = function (WrappedComponent) {
         render () {
             const {
                 /* eslint-disable no-unused-vars */
+                fontsLoaded,
                 onLoadedProject: onLoadedProjectProp,
                 projectData,
                 projectId,
@@ -65,10 +69,6 @@ const vmManagerHOC = function (WrappedComponent) {
                 vm,
                 ...componentProps
             } = this.props;
-            // don't display anything until we have data loaded
-            if (!this.props.projectData) {
-                return null;
-            }
             return (
                 <WrappedComponent
                     errorMessage={this.state.errorMessage}
@@ -82,6 +82,7 @@ const vmManagerHOC = function (WrappedComponent) {
     }
 
     VMManager.propTypes = {
+        fontsLoaded: PropTypes.bool,
         isLoadingWithId: PropTypes.bool,
         loadingState: PropTypes.oneOf(LoadingStates),
         onLoadedProject: PropTypes.func,

test/unit/util/vm-manager-hoc.test.jsx

@@ -60,6 +60,7 @@ describe('VMManagerHOC', () => {
         const WrappedComponent = vmManagerHOC(Component);
         const mounted = mount(
             <WrappedComponent
+                fontsLoaded
                 isLoadingWithId={false}
                 store={store}
                 vm={vm}
@@ -75,27 +76,46 @@ describe('VMManagerHOC', () => {
         // nextTick needed since vm.loadProject is async, and we have to wait for it :/
         process.nextTick(() => expect(mockedOnLoadedProject).toHaveBeenLastCalledWith(LoadingState.LOADING_VM_WITH_ID));
     });
-    test('if there is projectData, the child is rendered', () => {
+    test('if the fontsLoaded prop becomes true, it loads project data into the vm', () => {
+        vm.loadProject = jest.fn(() => Promise.resolve());
+        const mockedOnLoadedProject = jest.fn();
         const Component = () => <div />;
         const WrappedComponent = vmManagerHOC(Component);
         const mounted = mount(
             <WrappedComponent
-                projectData="100"
+                isLoadingWithId
                 store={store}
                 vm={vm}
+                onLoadedProject={mockedOnLoadedProject}
             />
         );
-        expect(mounted.find('div').length).toBe(1);
+        mounted.setProps({
+            fontsLoaded: true,
+            loadingState: LoadingState.LOADING_VM_WITH_ID,
+            projectData: '100'
+        });
+        expect(vm.loadProject).toHaveBeenLastCalledWith('100');
+        // nextTick needed since vm.loadProject is async, and we have to wait for it :/
+        process.nextTick(() => expect(mockedOnLoadedProject).toHaveBeenLastCalledWith(LoadingState.LOADING_VM_WITH_ID));
     });
-    test('if there is no projectData, nothing is rendered', () => {
+    test('if the fontsLoaded prop is false, project data is never loaded', () => {
+        vm.loadProject = jest.fn(() => Promise.resolve());
+        const mockedOnLoadedProject = jest.fn();
         const Component = () => <div />;
         const WrappedComponent = vmManagerHOC(Component);
         const mounted = mount(
             <WrappedComponent
+                isLoadingWithId
                 store={store}
                 vm={vm}
+                onLoadedProject={mockedOnLoadedProject}
             />
         );
-        expect(mounted.find('div').length).toBe(0);
+        mounted.setProps({
+            loadingState: LoadingState.LOADING_VM_WITH_ID,
+            projectData: '100'
+        });
+        expect(vm.loadProject).toHaveBeenCalledTimes(0);
+        process.nextTick(() => expect(mockedOnLoadedProject).toHaveBeenCalledTimes(0));
     });
 });