[DE mobile] Add skeleton

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

@@ -198,7 +198,6 @@ class MainController extends Component {
                 f7.emit('resize');
 
                 this._isDocReady = true;
-                appOptions.changeDocReady(true);
 
                 this.api.SetDrawingFreeze(false);
 
@@ -246,6 +245,7 @@ class MainController extends Component {
 
                 Common.Notifications.trigger('document:ready');
                 Common.Gateway.documentReady();
+                appOptions.changeDocReady(true);
             };
 
             const _process_array = (array, fn) => {

apps/documenteditor/mobile/src/less/app.less

@@ -21,6 +21,60 @@
     --f7-popover-width: 360px;
 }
 
+// Skeleton of document
+
+@keyframes flickerAnimation {
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-o-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-moz-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+@-webkit-keyframes flickerAnimation{
+    0%   { opacity:0.1; }
+    50%  { opacity:1; }
+    100% { opacity:0.1; }
+}
+
+.doc-placeholder-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 6000;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+
+.doc-placeholder {
+    position: relative;
+    background: #fbfbfb;
+    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-subnavbar-offset, 0px));
+    overflow: hidden;
+    height: 100%;
+
+    > .line {
+        height: 15px;
+        margin: 30px;
+        background: #e2e2e2;
+        overflow: hidden;
+        position: relative;
+
+        -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;
+    }
+}
+
 // Review
 .page-review {
     --f7-toolbar-link-color: @themeColor;

apps/documenteditor/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 */}
@@ -83,9 +84,37 @@ class MainPage extends Component {
                   </Subnavbar>
               </Navbar>
               {/* Page content */}
-              <View id="editor_sdk">
 
+              <View id="editor_sdk">
               </View>
+
+              {showPlaceholder ?
+                  <div className="doc-placeholder-container">
+                      <div className="doc-placeholder">
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                          <div className="line"></div>
+                      </div>
+                  </div> : null
+              }
+
               {/* {
                   Device.phone ? null : <SearchSettings />
               } */}

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

@@ -20,7 +20,8 @@ export class storeAppOptions {
 
             canBrandingExt: observable,
 
-            isDocReady: observable
+            isDocReady: observable,
+            changeDocReady: action
         });
     }