From 07d6f30377979cc307f1e26d0c3d2d461b01023a Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Thu, 23 Sep 2021 12:29:06 +0300
Subject: [PATCH] [SSE mobile] skip "Suspense" options on app launch

---
 apps/spreadsheeteditor/mobile/src/app.js      |  4 +---
 .../mobile/src/controller/ContextMenu.jsx     |  8 +++++---
 .../mobile/src/controller/Error.jsx           |  2 +-
 .../mobile/src/controller/FilterOptions.jsx   |  6 ++++--
 .../mobile/src/controller/LongActions.jsx     | 10 ++++++----
 .../mobile/src/controller/Main.jsx            |  9 ++++++---
 .../mobile/src/index_dev.html                 | 19 +++++++++++++++++--
 apps/spreadsheeteditor/mobile/src/lib/i18n.js |  3 +++
 .../mobile/src/page/main.jsx                  |  3 +++
 9 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/apps/spreadsheeteditor/mobile/src/app.js b/apps/spreadsheeteditor/mobile/src/app.js
index ff8dd9ae5..923799f29 100644
--- a/apps/spreadsheeteditor/mobile/src/app.js
+++ b/apps/spreadsheeteditor/mobile/src/app.js
@@ -36,9 +36,7 @@ Framework7.use(Framework7React);
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
         <Provider {...stores}>
-            <Suspense fallback="">
-                <App />
-            </Suspense>
+            <App />
         </Provider>
     </I18nextProvider>,
   document.getElementById('app'),
diff --git a/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx b/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx
index a229b1b05..d152f875d 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/ContextMenu.jsx
+++ b/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);
-        api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
-        api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
+        if ( api ) {
+            api.asc_unregisterCallback('asc_onShowComment', this.onApiShowComment);
+            api.asc_unregisterCallback('asc_onHideComment', this.onApiHideComment);
+            api.asc_unregisterCallback('asc_onMouseMove', this.onApiMouseMove);
+        }
     }
 
 
diff --git a/apps/spreadsheeteditor/mobile/src/controller/Error.jsx b/apps/spreadsheeteditor/mobile/src/controller/Error.jsx
index 7447d436a..bc4927c27 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/Error.jsx
+++ b/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);
         }
     });
 
diff --git a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
index 1a214d32c..7c5b5a33d 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/FilterOptions.jsx
@@ -19,7 +19,7 @@ const FilterOptionsController = () => {
             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 = () => {
         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);
+            }
         }
     }, []);
 
diff --git a/apps/spreadsheeteditor/mobile/src/controller/LongActions.jsx b/apps/spreadsheeteditor/mobile/src/controller/LongActions.jsx
index 34d2f7d8f..9124ca9fe 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/LongActions.jsx
+++ b/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);
-            api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
-            api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
-            api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
+            if ( api ) {
+                api.asc_unregisterCallback('asc_onStartAction', onLongActionBegin);
+                api.asc_unregisterCallback('asc_onEndAction', onLongActionEnd);
+                api.asc_unregisterCallback('asc_onOpenDocumentProgress', onOpenDocument);
+                api.asc_unregisterCallback('asc_onConfirmAction', onConfirmAction);
+            }
 
             Common.Notifications.off('preloader:endAction', onLongActionEnd);
             Common.Notifications.off('preloader:beginAction', onLongActionBegin);
diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx
index 44adf3d14..e025854b2 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx
+++ b/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 warnNoLicense  = _t.warnNoLicense.replace(/%1/g, __COMPANY_NAME__);
+        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__);
         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();
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/index_dev.html b/apps/spreadsheeteditor/mobile/src/index_dev.html
index 18a92b021..43603bf9e 100644
--- a/apps/spreadsheeteditor/mobile/src/index_dev.html
+++ b/apps/spreadsheeteditor/mobile/src/index_dev.html
@@ -22,17 +22,28 @@
   <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">
-  
-  
+
+    <link rel="stylesheet" type="text/css" href="../../common/mobile/resources/less/skeleton.css">
+
   <!-- 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');
 
+        let navbar = document.querySelector('.skl-navbar');
+        if ( window.devicePixelRatio ) {
+            if ( navbar ) {
+                navbar.classList.add(`skl-pixel-ratio--${Math.floor(window.devicePixelRatio)}`);
+            }
+        }
+
         if ( !isAndroid ) {
             const ua = navigator.userAgent;
             const iPad = ua.match(/(iPad).*OS\s([\d_]+)/);
@@ -43,6 +54,10 @@
                     get: function () { return `iPad; CPU OS 11_0 ${ua}`; }
                 });
             }
+        } else {
+            if ( navbar ) {
+                navbar.classList.add('skl-navbar--md');
+            }
         }
 
         const getUrlParams = () => {
diff --git a/apps/spreadsheeteditor/mobile/src/lib/i18n.js b/apps/spreadsheeteditor/mobile/src/lib/i18n.js
index b3d3566ee..fea50f663 100644
--- a/apps/spreadsheeteditor/mobile/src/lib/i18n.js
+++ b/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;
\ 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 a58b7d571..f22fa9ab1 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/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' : ''}`}>