Merge pull request #4210 from paulkaplan/stage-loading

Use the loading screen in player mode

src/components/gui/gui.jsx

@@ -141,6 +141,7 @@ const GUIComponent = props => {
             <StageWrapper
                 isRendererSupported={isRendererSupported}
                 isRtl={isRtl}
+                loading={loading}
                 stageSize={STAGE_SIZE_MODES.large}
                 vm={vm}
             >

src/components/loader/loader.css

@@ -2,7 +2,7 @@
 @import "../../css/z-index.css";
 
 .background {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;

src/components/stage-wrapper/stage-wrapper.jsx

@@ -6,6 +6,7 @@ import Box from '../box/box.jsx';
 import {STAGE_DISPLAY_SIZES} from '../../lib/layout-constants.js';
 import StageHeader from '../../containers/stage-header.jsx';
 import Stage from '../../containers/stage.jsx';
+import Loader from '../loader/loader.jsx';
 
 import styles from './stage-wrapper.css';
 
@@ -13,6 +14,7 @@ const StageWrapperComponent = function (props) {
     const {
         isRtl,
         isRendererSupported,
+        loading,
         stageSize,
         vm
     } = props;
@@ -38,6 +40,9 @@ const StageWrapperComponent = function (props) {
                         null
                 }
             </Box>
+            {loading ? (
+                <Loader />
+            ) : null}
         </Box>
     );
 };
@@ -45,6 +50,7 @@ const StageWrapperComponent = function (props) {
 StageWrapperComponent.propTypes = {
     isRendererSupported: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool,
+    loading: PropTypes.bool,
     stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
     vm: PropTypes.instanceOf(VM).isRequired
 };