diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 3e4497fff..4d762377c 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/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) { diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index b2dbf1c91..1854309e8 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -42,4 +42,43 @@ &.page-content, .page-content { 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; + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index d00c95c79..7c2a80c34 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/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 ( {/* Top Navbar */} @@ -85,6 +86,13 @@ class MainPage extends Component { this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> {/* Page content */} + {showPlaceholder ? +
+
+
+
: + null + } { !this.state.editOptionsVisible ? null : diff --git a/apps/spreadsheeteditor/mobile/src/store/appOptions.js b/apps/spreadsheeteditor/mobile/src/store/appOptions.js index b079dfb96..24c605a10 100644 --- a/apps/spreadsheeteditor/mobile/src/store/appOptions.js +++ b/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;