Trigger loading animation and loading error states from load button.

src/containers/gui.jsx

@@ -70,7 +70,7 @@ class GUI extends React.Component {
         } = this.props;
         return (
             <GUIComponent
-                loading={fetchingProject || this.state.loading}
+                loading={fetchingProject || this.state.loading || this.props.loadingStateVisible}
                 vm={vm}
                 {...componentProps}
             >
@@ -85,6 +85,7 @@ GUI.propTypes = {
     feedbackFormVisible: PropTypes.bool,
     fetchingProject: PropTypes.bool,
     importInfoVisible: PropTypes.bool,
+    loadingStateVisible: PropTypes.bool,
     previewInfoVisible: PropTypes.bool,
     projectData: PropTypes.string,
     vm: PropTypes.instanceOf(VM)
@@ -98,6 +99,7 @@ const mapStateToProps = state => ({
     costumesTabVisible: state.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
     feedbackFormVisible: state.modals.feedbackForm,
     importInfoVisible: state.modals.importInfo,
+    loadingStateVisible: state.modals.loadingProject,
     previewInfoVisible: state.modals.previewInfo,
     soundsTabVisible: state.editorTab.activeTabIndex === SOUNDS_TAB_INDEX
 });

src/containers/load-button.jsx

@@ -5,6 +5,11 @@ import {connect} from 'react-redux';
 
 import LoadButtonComponent from '../components/load-button/load-button.jsx';
 
+import {
+    openLoadingProject,
+    closeLoadingProject
+} from '../reducers/modals';
+
 class LoadButton extends React.Component {
     constructor (props) {
         super(props);
@@ -13,10 +18,21 @@ class LoadButton extends React.Component {
             'handleChange',
             'handleClick'
         ]);
+        this.state = {
+            loadingError: false,
+            errorMessage: ''
+        };
     }
     handleChange (e) {
+        this.props.openLoadingState();
         const reader = new FileReader();
-        reader.onload = () => this.props.vm.loadProjectLocal(reader.result);
+        reader.onload = () => this.props.vm.loadProjectLocal(reader.result)
+            .then(() => {
+                this.props.closeLoadingState();
+            })
+            .catch(error => {
+                this.setState({loadingError: true, errorMessage: error});
+            });
         reader.readAsArrayBuffer(e.target.files[0]);
     }
     handleClick () {
@@ -26,7 +42,10 @@ class LoadButton extends React.Component {
         this.fileInput = input;
     }
     render () {
+        if (this.state.loadingError) throw new Error(`Failed to load project: ${this.state.errorMessage}`);
         const {
+            closeLoadingState, // eslint-disable-line no-unused-vars
+            openLoadingState, // eslint-disable-line no-unused-vars
             vm, // eslint-disable-line no-unused-vars
             ...props
         } = this.props;
@@ -42,6 +61,8 @@ class LoadButton extends React.Component {
 }
 
 LoadButton.propTypes = {
+    closeLoadingState: PropTypes.func,
+    openLoadingState: PropTypes.func,
     vm: PropTypes.shape({
         loadProjectLocal: PropTypes.func
     })
@@ -51,7 +72,12 @@ const mapStateToProps = state => ({
     vm: state.vm
 });
 
+const mapDispatchToProps = dispatch => ({
+    closeLoadingState: () => dispatch(closeLoadingProject()),
+    openLoadingState: () => dispatch(openLoadingProject())
+});
+
 export default connect(
     mapStateToProps,
-    () => ({}) // omit dispatch prop
+    mapDispatchToProps
 )(LoadButton);

src/reducers/modals.js

@@ -8,6 +8,7 @@ const MODAL_COSTUME_LIBRARY = 'costumeLibrary';
 const MODAL_EXTENSION_LIBRARY = 'extensionLibrary';
 const MODAL_FEEDBACK_FORM = 'feedbackForm';
 const MODAL_IMPORT_INFO = 'importInfo';
+const MODAL_LOADING_PROJECT = 'loadingProject';
 const MODAL_PREVIEW_INFO = 'previewInfo';
 const MODAL_SOUND_LIBRARY = 'soundLibrary';
 const MODAL_SPRITE_LIBRARY = 'spriteLibrary';
@@ -20,6 +21,7 @@ const initialState = {
     [MODAL_EXTENSION_LIBRARY]: false,
     [MODAL_FEEDBACK_FORM]: false,
     [MODAL_IMPORT_INFO]: false,
+    [MODAL_LOADING_PROJECT]: false,
     [MODAL_PREVIEW_INFO]: true,
     [MODAL_SOUND_LIBRARY]: false,
     [MODAL_SPRITE_LIBRARY]: false,
@@ -73,6 +75,10 @@ const openImportInfo = function () {
     analytics.pageview('modals/import');
     return openModal(MODAL_IMPORT_INFO);
 };
+const openLoadingProject = function () {
+    analytics.pageview('modals/loading');
+    return openModal(MODAL_LOADING_PROJECT);
+};
 const openPreviewInfo = function () {
     analytics.pageview('/modals/preview');
     return openModal(MODAL_PREVIEW_INFO);
@@ -104,6 +110,9 @@ const closeFeedbackForm = function () {
 const closeImportInfo = function () {
     return closeModal(MODAL_IMPORT_INFO);
 };
+const closeLoadingProject = function () {
+    return closeModal(MODAL_LOADING_PROJECT);
+};
 const closePreviewInfo = function () {
     return closeModal(MODAL_PREVIEW_INFO);
 };
@@ -123,6 +132,7 @@ export {
     openExtensionLibrary,
     openFeedbackForm,
     openImportInfo,
+    openLoadingProject,
     openPreviewInfo,
     openSoundLibrary,
     openSpriteLibrary,
@@ -132,6 +142,7 @@ export {
     closeExtensionLibrary,
     closeFeedbackForm,
     closeImportInfo,
+    closeLoadingProject,
     closePreviewInfo,
     closeSpriteLibrary,
     closeSoundLibrary,