[PE mobile] Add skeleton

apps/common/mobile/resources/less/common.less

@@ -784,6 +784,39 @@ input[type="number"]::-webkit-inner-spin-button {
     }
 }
 
+// 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;
+}
+
 
 
 

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

@@ -23,37 +23,6 @@
 
 // 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;

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

@@ -432,6 +432,8 @@ class MainController extends Component {
         f7.emit('resize');
 
         Common.Notifications.trigger('document:ready');
+
+        appOptions.changeDocReady(true);
     }
 
     onLicenseChanged (params) {

apps/presentationeditor/mobile/src/less/app.less

@@ -21,3 +21,63 @@
 :root {
     --f7-popover-width: 360px;
 }
+
+// Skeleton of document
+
+.doc-placeholder {
+    background: #f5f5f5;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 6000;
+    position: absolute;
+    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-subnavbar-offset, 0px));
+    overflow: hidden;
+
+    .slide-h {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        width: 90%;
+        height: 100%;
+        margin: 0 auto;
+        padding-top: 30%;
+    }
+
+    .slide-v {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        padding-bottom: 56.1333%;
+    }
+
+    .slide-container {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: #fbfbfb;
+        border: 1px solid #dfdfdf;
+
+        -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;
+
+        > .line {
+            height: 20%;
+            margin: 0 120px;
+            border-radius: 6px;
+            background: #f5f5f5;
+
+            &:nth-child(1) {
+                height: 30%;
+                margin: 10% 80px 0;
+            }
+
+            &.empty {
+                background: transparent;
+            }
+        }
+    }
+}

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

@@ -75,7 +75,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 (
             <Fragment>
                 {!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
@@ -91,6 +91,21 @@ class MainPage extends Component {
                     {/* Page content */}
                     <View id="editor_sdk" />
 
+                    {showPlaceholder ?
+                        <div className="doc-placeholder">
+                            <div className="slide-h">
+                                <div className="slide-v">
+                                    <div className="slide-container">
+                                        <div className="line"></div>
+                                        <div className="line empty"></div>
+                                        <div className="line"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div> :
+                        null
+                    }
+
                     <SearchSettings useSuspense={false} />
 
                     {

apps/presentationeditor/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) {
         this.config = config;
         this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);