diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 558a9a093..c64ce5ceb 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/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) => { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index b834e876a..507984adf 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/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; diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 33f49fe57..9bc3c3b24 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/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 ( {/* Top Navbar */} @@ -83,9 +84,37 @@ class MainPage extends Component { {/* Page content */} + - + + {showPlaceholder ? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
: null + } + {/* { Device.phone ? null : } */} diff --git a/apps/documenteditor/mobile/src/store/appOptions.js b/apps/documenteditor/mobile/src/store/appOptions.js index 1c4303aa7..15160ce54 100644 --- a/apps/documenteditor/mobile/src/store/appOptions.js +++ b/apps/documenteditor/mobile/src/store/appOptions.js @@ -20,7 +20,8 @@ export class storeAppOptions { canBrandingExt: observable, - isDocReady: observable + isDocReady: observable, + changeDocReady: action }); }