Merge pull request #1230 from ONLYOFFICE/feature/skeleton-optimize

Feature/skeleton optimize

apps/common/mobile/lib/controller/ContextMenu.jsx

@@ -206,10 +206,12 @@ class ContextMenuController extends Component {
         Common.Notifications.off('document:ready', this.onDocumentReady);
 
         const api = Common.EditorApi.get();
-        api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
+        if ( api ) {
-        api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
+            api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
-        api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
+            api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
-        api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
+            api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
+            api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
+        }
     }
 
     componentDidMount() {

apps/common/mobile/lib/controller/Plugins.jsx

@@ -31,10 +31,12 @@ const PluginsController = inject('storeAppOptions')(observer(props => {
         return () => {
             const api = Common.EditorApi.get();
 
-            api.asc_unregisterCallback("asc_onPluginShow", showPluginModal);
+            if ( api ) {
-            api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
+                api.asc_unregisterCallback("asc_onPluginShow", showPluginModal);
-            api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
+                api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
-            api.asc_unregisterCallback('asc_onPluginsInit', onPluginsInit);
+                api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
+                api.asc_unregisterCallback('asc_onPluginsInit', onPluginsInit);
+            }
         };
     });
 

apps/common/mobile/resources/css/skeleton.css

@@ -0,0 +1,107 @@
+body {
+    margin: 0;
+}
+
+.skl-navbar {
+    --box-logo-height: 26px;
+    --skl-navbar-height: 44px;
+    --skl-pixel-ratio: 1;
+}
+
+.skl-navbar--md {
+    --skl-navbar-height: 56px;
+}
+
+.skl-pixel-ratio--2 {
+    --skl-pixel-ratio: 2;
+}
+
+.skl-navbar {
+    height: calc(var(--skl-navbar-height) + var(--box-logo-height));
+    width: 100%;
+    position: relative;
+}
+
+.skl-navbar.skl-navbar--md {
+    /*height: calc(56px + 26px);*/
+}
+
+.skl-navbar.skl-navbar--ios {
+    background-color: #f7f7f8;
+}
+
+.skl-navbar.skl-navbar--word.skl-navbar--md {
+    background-color: #446995;
+}
+
+.skl-navbar.skl-navbar--cell.skl-navbar--md {
+    background-color: #40865c;
+}
+
+.skl-navbar.skl-navbar--slide.skl-navbar--md {
+    background-color: #aa5252;
+}
+
+.skl-navbar::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+}
+
+.skl-navbar:not(.skl-navbar--md)::before {
+    background-color: rgba(0,0,0,0.25);
+    display: block;
+    z-index: 15;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    transform-origin: 50% 100%;
+    transform: scaleY(calc(1 / var(--skl-pixel-ratio)));
+}
+
+.skl-navbar.skl-navbar--md::before {
+    right: 0;
+    width: 100%;
+    top: 100%;
+    bottom: auto;
+    height: 8px;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%)
+}
+
+.skl-lines {
+    display: none;
+}
+
+.skl-line {
+    height: 15px;
+    margin: 30px;
+    background: #e2e2e2;
+    overflow: hidden;
+    position: relative;
+    -webkit-animation: flickerAnimation 2s infinite ease-in-out;
+    animation: flickerAnimation 2s infinite ease-in-out;
+}
+
+@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; }
+}

apps/documenteditor/mobile/src/app.js

@@ -36,9 +36,9 @@ Framework7.use(Framework7React)
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
         <Provider {...stores}>
-            <Suspense fallback="">
+            {/*<Suspense fallback="loading...">*/}
                 <App />
-            </Suspense>
+            {/*</Suspense>*/}
         </Provider>
     </I18nextProvider>,
   document.getElementById('app'),

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

@@ -13,7 +13,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
         });
         return () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onError', onError);
+            if ( api ) api.asc_unregisterCallback('asc_onError', onError);
         }
     });
 

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

@@ -35,9 +35,11 @@ const LongActionsController = () => {
 
         return ( () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            if ( api ) {
-            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
-            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+                api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+            }
 
             Common.Notifications.off('preloader:endAction', onLongActionEnd);
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);

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

@@ -282,7 +282,7 @@ class MainController extends Component {
                     });
 
                     Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
+                    // Common.EditorApi = {get: () => this.api};
 
                     // Set font rendering mode
                     let value = LocalStorage.getItem("de-settings-fontrender");
@@ -408,7 +408,9 @@ class MainController extends Component {
     }
 
     applyLicense () {
-        const _t = this._t;
+        const { t } = this.props;
+        const _t = t('Main', {returnObjects:true});
+
         const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
         const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
         const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
@@ -941,6 +943,7 @@ class MainController extends Component {
     }
 
     componentDidMount() {
+        Common.EditorApi = {get: () => this.api};
         this.initSdk();
     }
 }

apps/documenteditor/mobile/src/index_dev.html

@@ -22,17 +22,37 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
   <link rel="icon" href="static/icons/favicon.png">
-  
+
-  
+    <% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
+        <link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
+    <% } else { %>
+        <style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
+    <% } %>
+
   <!-- built styles file will be auto injected -->
 </head>
 <body>
+    <section class="skl-container">
+        <div class="skl-navbar skl-navbar--word"></div>
+        <div class="skl-lines">
+            <div class="skl-line"></div>
+            <div class="skl-line"></div>
+            <div class="skl-line"></div>
+        </div>
+    </section>
     <script>
         const isAndroid = /Android/.test(navigator.userAgent);
         if ( isAndroid && navigator.platform == 'Win32' )
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        const element_add_class = (el, cls) => (el && el.classList.add(cls));
+
+        let navbar = document.querySelector('.skl-navbar');
+        if ( window.devicePixelRatio ) {
+            element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
+        }
+
         if ( !isAndroid ) {
             const ua = navigator.userAgent;
             const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@@ -42,7 +62,11 @@
                 Object.defineProperty(navigator, 'userAgent', {
                     get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
                 });
+            } else {
+                element_add_class(navbar, `skl-navbar--ios`);
             }
+        } else {
+            element_add_class(navbar, `skl-navbar--md`);
         }
 
         const getUrlParams = () => {

apps/documenteditor/mobile/src/lib/i18n.js

@@ -12,6 +12,9 @@ i18n.use(initReactI18next)
             loadPath: './locale/{{lng}}.json'
         },
         interpolation: { escapeValue: false },
+        react: {
+            useSuspense: false,
+        },
     });
 
 export default i18n;

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

@@ -88,6 +88,10 @@ class MainPage extends Component {
       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));
+      if ( $$('.skl-container').length ) {
+          $$('.skl-container').remove();
+      }
+
       return (
           <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}

apps/presentationeditor/mobile/src/app.js

@@ -35,9 +35,9 @@ Framework7.use(Framework7React)
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
         <Provider {...stores}>
-            <Suspense fallback="">
+            {/*<Suspense fallback="">*/}
                 <App />
-            </Suspense>
+            {/*</Suspense>*/}
         </Provider>
     </I18nextProvider>,
   document.getElementById('app'),

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

@@ -40,8 +40,10 @@ class ContextMenu extends ContextMenuController {
         super.componentWillUnmount();
 
         const api = Common.EditorApi.get();
-        api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
+        if ( api ) {
-        api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+            api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
+            api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+        }
     }
 
 

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

@@ -13,7 +13,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
         });
         return () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onError', onError);
+            if ( api ) api.asc_unregisterCallback('asc_onError', onError);
         }
     });
 

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

@@ -35,9 +35,11 @@ const LongActionsController = () => {
 
         return (() => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            if ( api ) {
-            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
-            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+                api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+            }
 
             Common.Notifications.off('preloader:endAction', onLongActionEnd);
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);

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

@@ -184,7 +184,6 @@ class MainController extends Component {
                     });
 
                     Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
 
                     this.appOptions   = {};
                     this.bindEvents();
@@ -479,7 +478,9 @@ class MainController extends Component {
     }
 
     applyLicense () {
-        const _t = this._t;
+        const { t } = this.props;
+        const _t = t('Controller.Main', {returnObjects:true});
+
         const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
         const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
         const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
@@ -834,6 +835,7 @@ class MainController extends Component {
     }
 
     componentDidMount () {
+        Common.EditorApi = {get: () => this.api};
         this.initSdk();
     }
 }

apps/presentationeditor/mobile/src/index_dev.html

@@ -22,17 +22,32 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
   <link rel="icon" href="static/icons/favicon.png">
-  
+
-  
+    <% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
+        <link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
+    <% } else { %>
+        <style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
+    <% } %>
+
   <!-- built styles file will be auto injected -->
 </head>
 <body>
+    <section class="skl-container">
+        <div class="skl-navbar skl-navbar--slide"></div>
+    </section>
     <script>
         const isAndroid = /Android/.test(navigator.userAgent);
         if ( isAndroid && navigator.platform == 'Win32' )
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        const element_add_class = (el, cls) => (el && el.classList.add(cls));
+
+        let navbar = document.querySelector('.skl-navbar');
+        if ( window.devicePixelRatio ) {
+            element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
+        }
+
         if ( !isAndroid ) {
             const ua = navigator.userAgent;
             const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@@ -42,7 +57,11 @@
                 Object.defineProperty(navigator, 'userAgent', {
                     get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
                 });
+            } else {
+                element_add_class(navbar, `skl-navbar--ios`);
             }
+        } else {
+            element_add_class(navbar, `skl-navbar--md`);
         }
 
         const getUrlParams = () => {

apps/presentationeditor/mobile/src/lib/i18n.js

@@ -12,6 +12,9 @@ i18n.use(initReactI18next)
             loadPath: './locale/{{lng}}.json'
         },
         interpolation: { escapeValue: false },
+        react: {
+            useSuspense: false,
+        },
     });
 
 export default i18n;

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

@@ -89,6 +89,11 @@ class MainPage extends Component {
         });
     };
 
+    componentDidMount () {
+        if ( $$('.skl-container').length )
+            $$('.skl-container').remove();
+    }
+
     render() {
         const appOptions = this.props.storeAppOptions;
         const config = appOptions.config;

apps/spreadsheeteditor/mobile/src/app.js

@@ -36,9 +36,7 @@ Framework7.use(Framework7React);
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
         <Provider {...stores}>
-            <Suspense fallback="">
+            <App />
-                <App />
-            </Suspense>
         </Provider>
     </I18nextProvider>,
   document.getElementById('app'),

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

@@ -44,9 +44,11 @@ class ContextMenu extends ContextMenuController {
         super.componentWillUnmount();
 
         const api = Common.EditorApi.get();
-        api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
+        if ( api ) {
-        api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+            api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
-        api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
+            api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+            api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
+        }
     }
 
 

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

@@ -13,7 +13,7 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
         });
         return () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onError', onError);
+            if ( api ) api.asc_unregisterCallback('asc_onError', onError);
         }
     });
 

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

@@ -19,7 +19,7 @@ const FilterOptionsController = memo( () => {
             api.asc_registerCallback('asc_onSetAFDialog',onApiFilterOptions);
         }
         
-        if ( !Common.EditorApi ) {
+        if ( !Common.EditorApi.get() ) {
             Common.Notifications.on('document:ready',onDocumentReady);
         } else {
             onDocumentReady();
@@ -28,7 +28,9 @@ const FilterOptionsController = memo( () => {
         return () => { 
             Common.Notifications.off('document:ready', onDocumentReady);
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onSetAFDialog',onApiFilterOptions);
+            if ( api ) {
+                api.asc_unregisterCallback('asc_onSetAFDialog', onApiFilterOptions);
+            }
         }
     }, []);
 

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

@@ -36,10 +36,12 @@ const LongActionsController = () => {
 
         return ( () => {
             const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+            if ( api ) {
-            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
-            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+                api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
-            api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
+                api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+                api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
+            }
 
             Common.Notifications.off('preloader:endAction', onLongActionEnd);
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);

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

@@ -20,6 +20,7 @@ import About from "../../../../common/mobile/lib/view/About";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
 import EncodingController from "./Encoding";
 import { StatusbarController } from "./Statusbar";
+import { useTranslation } from 'react-i18next';
 
 @inject(
     "users",
@@ -281,7 +282,6 @@ class MainController extends Component {
                     });
 
                     Common.Notifications.trigger('engineCreated', this.api);
-                    Common.EditorApi = {get: () => this.api};
 
                     this.appOptions = {};
                     this.bindEvents();
@@ -507,8 +507,10 @@ class MainController extends Component {
     }
 
     applyLicense () {
-        const _t = this._t;
+        const { t } = this.props;
-        const warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
+        const _t = t('Controller.Main', {returnObjects:true});
+
+        const warnNoLicense = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
         const warnNoLicenseUsers = _t.warnNoLicenseUsers.replace(/%1/g, __COMPANY_NAME__);
         const textNoLicenseTitle = _t.textNoLicenseTitle.replace(/%1/g, __COMPANY_NAME__);
         const warnLicenseExceeded = _t.warnLicenseExceeded.replace(/%1/g, __COMPANY_NAME__);
@@ -851,6 +853,7 @@ class MainController extends Component {
     }
 
     componentDidMount() {
+        Common.EditorApi = {get: () => this.api};
         this.initSdk();
     }
 }

apps/spreadsheeteditor/mobile/src/index_dev.html

@@ -22,17 +22,32 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="static/icons/apple-touch-icon.png">
   <link rel="icon" href="static/icons/favicon.png">
-  
+
-  
+    <% if (!htmlWebpackPlugin.options.skeleton.stylesheet) { %>
+        <link rel="stylesheet" href="../../common/mobile/resources/css/skeleton.css">
+    <% } else { %>
+        <style><%= htmlWebpackPlugin.options.skeleton.stylesheet %></style>
+    <% } %>
+
   <!-- built styles file will be auto injected -->
 </head>
 <body>
+    <section class="skl-container ">
+        <div class="skl-navbar skl-navbar--cell"></div>
+    </section>
     <script>
         const isAndroid = /Android/.test(navigator.userAgent);
         if ( isAndroid && navigator.platform == 'Win32' )
             // Framework7 doesn't set Device.android flag when navigator.platform == 'Win32', change it for debug
             navigator.__defineGetter__('platform', () => 'Win32Debug');
 
+        const element_add_class = (el, cls) => (el && el.classList.add(cls));
+
+        let navbar = document.querySelector('.skl-navbar');
+        if ( window.devicePixelRatio ) {
+            element_add_class(navbar, `skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
+        }
+
         if ( !isAndroid ) {
             const ua = navigator.userAgent;
             const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@@ -42,7 +57,11 @@
                 Object.defineProperty(navigator, 'userAgent', {
                     get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
                 });
+            } else {
+                element_add_class(navbar, `skl-navbar--ios`);
             }
+        } else {
+            element_add_class(navbar, `skl-navbar--md`);
         }
 
         const getUrlParams = () => {

apps/spreadsheeteditor/mobile/src/lib/i18n.js

@@ -12,6 +12,9 @@ i18n.use(initReactI18next)
             loadPath: './locale/{{lng}}.json'
         },
         interpolation: { escapeValue: false },
+        react: {
+            useSuspense: false,
+        },
     });
 
 export default i18n;

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

@@ -91,6 +91,9 @@ class MainPage extends Component {
       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));
+      if ( $$('.skl-container').length ) {
+          $$('.skl-container').remove();
+      }
 
       return (
             <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>

vendor/framework7-react/build/webpack.config.js

@@ -89,6 +89,7 @@ module.exports = {
 
       {
         test: /\.css$/,
+        exclude: [/skeleton\.css$/i],
         use: [
           (env === 'development' ? 'style-loader' : {
             loader: MiniCssExtractPlugin.loader,
@@ -188,6 +189,9 @@ module.exports = {
       // new webpack.NamedModulesPlugin(),
     ]),
     // new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+    }),
     new HtmlWebpackPlugin({
       filename: `../../../apps/${editor}/mobile/index.html`,
       template: `../../apps/${editor}/mobile/src/index_dev.html`,
@@ -200,9 +204,9 @@ module.exports = {
         removeStyleLinkTypeAttributes: true,
         useShortDoctype: true
       } : false,
-    }),
+      skeleton: {
-    new MiniCssExtractPlugin({
+          stylesheet: env === 'development' ? undefined : fs.readFileSync(`../../apps/common/mobile/resources/css/skeleton.css`),
-      filename: 'css/[name].css',
+      },
     }),
     new CopyWebpackPlugin({
       patterns: [