Cover the fullscreen player mode stage with a loading screen

src/components/gui/gui.jsx

@@ -83,6 +83,7 @@ const GUIComponent = props => {
         importInfoVisible,
         intl,
         isCreating,
+        isFullScreen,
         isPlayerOnly,
         isRtl,
         isShared,
@@ -139,6 +140,7 @@ const GUIComponent = props => {
 
         return isPlayerOnly ? (
             <StageWrapper
+                isFullScreen={isFullScreen}
                 isRendererSupported={isRendererSupported}
                 isRtl={isRtl}
                 loading={loading}
@@ -380,6 +382,7 @@ GUIComponent.propTypes = {
     importInfoVisible: PropTypes.bool,
     intl: intlShape.isRequired,
     isCreating: PropTypes.bool,
+    isFullScreen: PropTypes.bool,
     isPlayerOnly: PropTypes.bool,
     isRtl: PropTypes.bool,
     isShared: PropTypes.bool,

src/components/loader/loader.css

@@ -17,6 +17,13 @@
     color: white;
 }
 
+.fullscreen {
+    /* Break out of the layout using position: fixed to cover the whole screen */
+    position: fixed;
+    /* Use the fullscreen stage z-index to allow covering full-screen mode */
+    z-index: $z-index-stage-wrapper-overlay;
+}
+
 .block-animation {
     width: 125px;
     height: 150px;

src/components/loader/loader.jsx

 import React from 'react';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 import styles from './loader.css';
 import PropTypes from 'prop-types';
 
@@ -148,7 +149,11 @@ class LoaderComponent extends React.Component {
     }
     render () {
         return (
-            <div className={styles.background}>
+            <div
+                className={classNames(styles.background, {
+                    [styles.fullscreen]: this.props.isFullScreen
+                })}
+            >
                 <div className={styles.container}>
                     <div className={styles.blockAnimation}>
                         <img
@@ -189,9 +194,11 @@ class LoaderComponent extends React.Component {
 }
 
 LoaderComponent.propTypes = {
+    isFullScreen: PropTypes.bool,
     messageId: PropTypes.string
 };
 LoaderComponent.defaultProps = {
+    isFullScreen: false,
     messageId: 'gui.loader.headline'
 };
 

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

@@ -12,6 +12,7 @@ import styles from './stage-wrapper.css';
 
 const StageWrapperComponent = function (props) {
     const {
+        isFullScreen,
         isRtl,
         isRendererSupported,
         loading,
@@ -41,13 +42,14 @@ const StageWrapperComponent = function (props) {
                 }
             </Box>
             {loading ? (
-                <Loader />
+                <Loader isFullScreen={isFullScreen} />
             ) : null}
         </Box>
     );
 };
 
 StageWrapperComponent.propTypes = {
+    isFullScreen: PropTypes.bool,
     isRendererSupported: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool.isRequired,
     loading: PropTypes.bool,

src/containers/gui.jsx

@@ -153,6 +153,7 @@ const mapStateToProps = state => {
         error: state.scratchGui.projectState.error,
         importInfoVisible: state.scratchGui.modals.importInfo,
         isError: getIsError(loadingState),
+        isFullScreen: state.scratchGui.mode.isFullScreen,
         isPlayerOnly: state.scratchGui.mode.isPlayerOnly,
         isRtl: state.locales.isRtl,
         isShowingProject: getIsShowingProject(loadingState),