[SSE mobile] Add skeleton

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -380,6 +380,8 @@ class MainController extends Component {
 
         Common.Gateway.documentReady();
         f7.emit('resize');
+
+        appOptions.changeDocReady(true);
     }
 
     applyMode (appOptions) {

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -43,3 +43,42 @@
         background-color: @white;
     }
 }
+
+// Skeleton of workbook
+
+.doc-placeholder {
+    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-subnavbar-offset, 0px));
+    overflow: hidden;
+    background: #fbfbfb;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #dfdfdf;
+    white-space: nowrap;
+    position: absolute;
+    top: 0;
+    left: 0;
+    font-size: 0;
+    z-index: 6000;
+
+    > .columns {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        display: inline-block;
+        background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
+        linear-gradient(rgba(0,0,0,0) 19px, #d5d5d5 20px) 0 0,
+        linear-gradient( #f1f1f1 0px, #f1f1f1 20px) 0 0 repeat-x;
+        background-size: 80px 20px;
+
+        -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+        -moz-animation: flickerAnimation 2s infinite ease-in-out;
+        -o-animation: flickerAnimation 2s infinite ease-in-out;
+        animation: flickerAnimation 2s infinite ease-in-out;
+
+        &:first-child {
+            background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0;
+            background-size: 20px 20px;
+            width: 25px;
+        }
+    }
+}

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -72,6 +72,7 @@ class MainPage extends Component {
       const appOptions = this.props.storeAppOptions;
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
+      const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
       return (
             <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}
@@ -85,6 +86,13 @@ class MainPage extends Component {
                 <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
                 {/* Page content */}
                 <View id="editor_sdk" />
+                {showPlaceholder ?
+                    <div className="doc-placeholder">
+                        <div className="columns"></div>
+                        <div className="columns"></div>
+                    </div> :
+                    null
+                }
                 <SearchSettings useSuspense={false} />
                 {
                     !this.state.editOptionsVisible ? null :

apps/spreadsheeteditor/mobile/src/store/appOptions.js

@@ -9,7 +9,10 @@ export class storeAppOptions {
             setPermissionOptions: action,
 
             lostEditingRights: observable,
-            changeEditingRights: action
+            changeEditingRights: action,
+
+            isDocReady: observable,
+            changeDocReady: action
         });
     }
 
@@ -22,6 +25,11 @@ export class storeAppOptions {
         this.lostEditingRights = value;
     }
 
+    isDocReady = false;
+    changeDocReady (value) {
+        this.isDocReady = value;
+    }
+
     setConfigOptions (config, _t) {
         this.config = config;
         this.customization = config.customization;