From b4c7fa87f43f81df2a4c592625176a62523a8352 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 13 Sep 2019 11:39:50 +0300
Subject: [PATCH] [Mobile] Add skeleton to deploy version

---
 .../mobile/app/controller/Main.js             |   5 +-
 apps/documenteditor/mobile/index.html         |   5 -
 apps/documenteditor/mobile/index.html.deploy  | 258 +++++----------
 .../mobile/index_loader.html.deploy           | 293 +++++++++++++++++
 .../mobile/app/controller/Main.js             |   5 +-
 apps/presentationeditor/mobile/index.html     |   5 -
 .../mobile/index.html.deploy                  | 306 ++++++++----------
 .../mobile/index_loader.html.deploy           | 293 +++++++++++++++++
 .../mobile/app/controller/Main.js             |   4 +-
 .../mobile/index.html.deploy                  | 293 +++++++----------
 .../mobile/index_loader.html.deploy           | 293 +++++++++++++++++
 build/documenteditor.json                     |   7 +-
 build/presentationeditor.json                 |   3 +-
 build/spreadsheeteditor.json                  |   3 +-
 14 files changed, 1231 insertions(+), 542 deletions(-)
 create mode 100644 apps/documenteditor/mobile/index_loader.html.deploy
 create mode 100644 apps/presentationeditor/mobile/index_loader.html.deploy
 create mode 100644 apps/spreadsheeteditor/mobile/index_loader.html.deploy

diff --git a/apps/documenteditor/mobile/app/controller/Main.js b/apps/documenteditor/mobile/app/controller/Main.js
index 5fc91200a..b7f2a776a 100644
--- a/apps/documenteditor/mobile/app/controller/Main.js
+++ b/apps/documenteditor/mobile/app/controller/Main.js
@@ -122,8 +122,6 @@ define([
                     'translate': translate
                 });
 
-                $('#editor_sdk').append('<div class="doc-placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div>');
-
                 // Localization uiApp params
                 uiApp.params.modalButtonOk = me.textOK;
                 uiApp.params.modalButtonCancel = me.textCancel;
@@ -222,6 +220,9 @@ define([
                 if (me.editorConfig.lang)
                     me.api.asc_setLocale(me.editorConfig.lang);
 
+                if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div>');
+
 //                if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
 //                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
             },
diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html
index 75f032d7d..0a15273f4 100644
--- a/apps/documenteditor/mobile/index.html
+++ b/apps/documenteditor/mobile/index.html
@@ -27,11 +27,6 @@
                 z-index: 10000;
             }
 
-            .loadmask {
-                width: 100%;
-                height: 100%;
-            }
-
             .loadmask > .brendpanel {
                 width: 100%;
                 position: absolute;
diff --git a/apps/documenteditor/mobile/index.html.deploy b/apps/documenteditor/mobile/index.html.deploy
index dc911efec..6eb804dc5 100644
--- a/apps/documenteditor/mobile/index.html.deploy
+++ b/apps/documenteditor/mobile/index.html.deploy
@@ -15,172 +15,107 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
-                line-height: 10px;
+                height: 44px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
-                max-height: 160px;
-                margin-bottom: 10px;
+            .loadmask > .brendpanel.visible {
+                opacity: 1;
             }
 
-            .loader-page-romb {
-                width: 40px;
+            .loadmask > .brendpanel.android {
+                height: 56px;
+                background: #446995;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #fbfbfb;
                 width: 100%;
-                bottom: 42%;
-                position: absolute;
-                text-align: center;
-                color: #888;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                line-height: 20px;
+                height: 100%;
+                padding-top: 56px;
             }
 
-            .loader-page-text-loading {
-                font-size: 14px;
+            .loadmask > .placeholder > .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;
             }
 
-            .loader-page-text-customer {
-                font-size: 16px;
-                margin-bottom: 5px;
+            @keyframes flickerAnimation {
+                0%   { opacity:0.1; }
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
-
-            .romb {
-                width: 40px;
-                height: 40px;
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
-                border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
+            @-o-keyframes flickerAnimation{
+                0%   { opacity:0.1; }
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
-
-            #blue {
-                z-index: 3;
-                background: #55bce6;
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
+            @-moz-keyframes flickerAnimation{
+                0%   { opacity:0.1; }
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
-
-            #red {
-                z-index:1;
-                background: #de7a59;
-                -webkit-animation-name: red;
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
-            }
-
-            #green {
-                z-index: 2;
-                background: #a1cb5c;
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
-            }
-
-            @-webkit-keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
+            @-webkit-keyframes flickerAnimation{
+                0%   { opacity:0.1; }
+                50%  { opacity:1; }
+                100% { opacity:0.1; }
             }
         </style>
     </head>
     <body>
+        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src="../../common/mobile/resources/img/header/header-logo.png"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+
         <script type="text/javascript">
             var ua = navigator.userAgent;
 
@@ -219,48 +154,23 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
-            else if ( lang == 'es') loading = 'Cargando...';
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
-            else if ( lang == 'pt') loading = 'Carregando...';
-            else if ( lang == 'ru') loading = 'Загрузка...';
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
+            if (brendpanel) {
+                if (/Android/.test(navigator.userAgent)) {
+                    brendpanel.classList.add('android');
+                }
+                brendpanel.classList.add('visible');
 
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
+                var elem = document.querySelector('.loading-logo img');
+                if (elem) {
+                    logo && (elem.setAttribute('src', logo));
+                    elem.style.opacity = 1;
+                }
+            }
 
             window.requireTimeourError = function(){
                 var reqerr;
diff --git a/apps/documenteditor/mobile/index_loader.html.deploy b/apps/documenteditor/mobile/index_loader.html.deploy
new file mode 100644
index 000000000..dc911efec
--- /dev/null
+++ b/apps/documenteditor/mobile/index_loader.html.deploy
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Document Editor</title>
+
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+
+        <!-- splash -->
+
+        <style type="text/css">
+            .loadmask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                border: none;
+                background-color: #f4f4f4;
+                z-index: 100;
+            }
+
+            .loader-page {
+                width: 100%;
+                height: 170px;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                line-height: 10px;
+            }
+
+            .loader-logo {
+                max-height: 160px;
+                margin-bottom: 10px;
+            }
+
+            .loader-page-romb {
+                width: 40px;
+                display: inline-block;
+            }
+
+            .loader-page-text {
+                width: 100%;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                color: #888;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                line-height: 20px;
+            }
+
+            .loader-page-text-loading {
+                font-size: 14px;
+            }
+
+            .loader-page-text-customer {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            var ua = navigator.userAgent;
+
+            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+
+                    if (!/Android/.test(ua)) {
+                        var ua = navigator.userAgent + ';Android 5.0';
+                        Object.defineProperty(navigator, 'userAgent', {
+                            get: function () { return ua; }
+                        });
+                    }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+                window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+
+            window.requireTimeourError = function(){
+                var reqerr;
+
+                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+                return reqerr;
+            };
+
+            var requireTimeoutID = setTimeout(function(){
+                window.alert(window.requireTimeourError());
+                window.location.reload();
+            }, 30000);
+
+            var require = {
+                waitSeconds: 30,
+                callback: function(){
+                    clearTimeout(requireTimeoutID);
+                }
+            };
+        </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+    </body>
+</html>
diff --git a/apps/presentationeditor/mobile/app/controller/Main.js b/apps/presentationeditor/mobile/app/controller/Main.js
index d558d23d4..6a1166481 100644
--- a/apps/presentationeditor/mobile/app/controller/Main.js
+++ b/apps/presentationeditor/mobile/app/controller/Main.js
@@ -133,8 +133,6 @@ define([
                 uiApp.params.smartSelectPickerCloseText = me.textDone;
                 uiApp.params.notificationCloseButtonText = me.textClose;
 
-                $('#editor_sdk').append('<div class="doc-placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div>');
-
                 if (me.api){
                     Common.Utils.Metric.setCurrentMetric(1); //pt
 
@@ -221,6 +219,9 @@ define([
                 if (me.editorConfig.lang)
                     me.api.asc_setLocale(me.editorConfig.lang);
 
+                if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder"><div class="slide-h"><div class="slide-v"><div class="slide-container"><div class="line"></div><div class="line"></div></div></div></div></div>');
+
 //                if (this.appOptions.location == 'us' || this.appOptions.location == 'ca')
 //                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
             },
diff --git a/apps/presentationeditor/mobile/index.html b/apps/presentationeditor/mobile/index.html
index 597c63233..c6d585f5b 100644
--- a/apps/presentationeditor/mobile/index.html
+++ b/apps/presentationeditor/mobile/index.html
@@ -27,11 +27,6 @@
                 z-index: 10000;
             }
 
-            .loadmask {
-                width: 100%;
-                height: 100%;
-            }
-
             .loadmask > .brendpanel {
                 width: 100%;
                 position: absolute;
diff --git a/apps/presentationeditor/mobile/index.html.deploy b/apps/presentationeditor/mobile/index.html.deploy
index f2a19a0e7..d4b6a8060 100644
--- a/apps/presentationeditor/mobile/index.html.deploy
+++ b/apps/presentationeditor/mobile/index.html.deploy
@@ -15,172 +15,158 @@
 
         <style type="text/css">
             .loadmask {
-                position: absolute;
                 left: 0;
                 top: 0;
+                position: absolute;
                 height: 100%;
                 width: 100%;
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
 
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
-                line-height: 10px;
+                height: 44px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
-                max-height: 160px;
-                margin-bottom: 10px;
+            .loadmask > .brendpanel.visible {
+                opacity: 1;
             }
 
-            .loader-page-romb {
-                width: 40px;
+            .loadmask > .brendpanel.android {
+                height: 56px;
+                background: #aa5252;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #f5f5f5;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
+                padding-top: 56px;
+            }
+
+            .loadmask > .placeholder.android {
+                padding-top: 70px;
+            }
+
+            .loadmask > .placeholder .slide-h {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                flex-grow: 1;
+                width: 90%;
+                margin: 15px auto;
+            }
+            .loadmask > .placeholder .slide-v {
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                padding-bottom: 56.1333%;
+            }
+
+            .loadmask > .placeholder .slide-container {
                 position: absolute;
-                text-align: center;
-                color: #888;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                line-height: 20px;
+                height: 100%;
+                width: 100%;
+                background: #fbfbfb;
+                border: 1px solid #dfdfdf;
+                display: grid;
+
+                -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;
             }
 
-            .loader-page-text-loading {
-                font-size: 14px;
-            }
-
-            .loader-page-text-customer {
-                font-size: 16px;
-                margin-bottom: 5px;
-            }
-
-            .romb {
-                width: 40px;
-                height: 40px;
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
+            .loadmask > .placeholder .slide-container > .line {
+                height: 40%;
+                margin: auto 60px;
                 border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
+                background: #f5f5f5;
             }
 
-            #blue {
-                z-index: 3;
-                background: #55bce6;
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
+            .loadmask > .placeholder .slide-container > .line:nth-child(1) {
+                height: 50%;
+                margin: auto 35px;
             }
 
-            #red {
-                z-index:1;
-                background: #de7a59;
-                -webkit-animation-name: red;
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
+            @keyframes flickerAnimation {
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            #green {
-                z-index: 2;
-                background: #a1cb5c;
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
+            @-o-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            @-webkit-keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
+            @-moz-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            @keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
+            @-webkit-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
         </style>
     </head>
     <body>
+    <div id="loading-mask" class="loadmask">
+            <div class="brendpanel">
+                <div>
+                    <div class="circle"></div>
+                    <div class="loading-logo">
+                        <img src="../../common/mobile/resources/img/header/header-logo.png">
+                    </div>
+                    <div class="circle"></div>
+                </div>
+            </div>
+            <div class="placeholder">
+                <div class="slide-h">
+                    <div class="slide-v">
+                        <div class="slide-container">
+                            <div class="line"></div>
+                            <div class="line"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <script type="text/javascript">
             var ua = navigator.userAgent;
 
@@ -219,48 +205,26 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
-            else if ( lang == 'es') loading = 'Cargando...';
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
-            else if ( lang == 'pt') loading = 'Carregando...';
-            else if ( lang == 'ru') loading = 'Загрузка...';
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
+            if (brendpanel) {
+                if (/Android/.test(navigator.userAgent)) {
+                    brendpanel.classList.add('android');
+                }
+                brendpanel.classList.add('visible');
+                var elem = document.querySelector('.loading-logo img');
+                if (elem) {
+                    logo && (elem.setAttribute('src', logo));
+                    elem.style.opacity = 1;
+                }
+            }
+            var placeholder = document.getElementsByClassName('placeholder')[0];
+            if (placeholder && /Android/.test(navigator.userAgent)) {
+                placeholder.classList.add('android');
+            }
 
             window.requireTimeourError = function(){
                 var reqerr;
diff --git a/apps/presentationeditor/mobile/index_loader.html.deploy b/apps/presentationeditor/mobile/index_loader.html.deploy
new file mode 100644
index 000000000..f2a19a0e7
--- /dev/null
+++ b/apps/presentationeditor/mobile/index_loader.html.deploy
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Document Editor</title>
+
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+
+        <!-- splash -->
+
+        <style type="text/css">
+            .loadmask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                border: none;
+                background-color: #f4f4f4;
+                z-index: 100;
+            }
+
+            .loader-page {
+                width: 100%;
+                height: 170px;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                line-height: 10px;
+            }
+
+            .loader-logo {
+                max-height: 160px;
+                margin-bottom: 10px;
+            }
+
+            .loader-page-romb {
+                width: 40px;
+                display: inline-block;
+            }
+
+            .loader-page-text {
+                width: 100%;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                color: #888;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                line-height: 20px;
+            }
+
+            .loader-page-text-loading {
+                font-size: 14px;
+            }
+
+            .loader-page-text-customer {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            var ua = navigator.userAgent;
+
+            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+
+                    if (!/Android/.test(ua)) {
+                        var ua = navigator.userAgent + ';Android 5.0;';
+                        Object.defineProperty(navigator, 'userAgent', {
+                            get: function () { return ua; }
+                        });
+                    }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+                window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+
+            window.requireTimeourError = function(){
+                var reqerr;
+
+                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+                return reqerr;
+            };
+
+            var requireTimeoutID = setTimeout(function(){
+                window.alert(window.requireTimeourError());
+                window.location.reload();
+            }, 30000);
+
+            var require = {
+                waitSeconds: 30,
+                callback: function(){
+                    clearTimeout(requireTimeoutID);
+                }
+            };
+        </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+    </body>
+</html>
diff --git a/apps/spreadsheeteditor/mobile/app/controller/Main.js b/apps/spreadsheeteditor/mobile/app/controller/Main.js
index 472f1ad74..cd5e6d63b 100644
--- a/apps/spreadsheeteditor/mobile/app/controller/Main.js
+++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js
@@ -125,7 +125,6 @@ define([
                     'translate': translate
                 });
 
-                $('#editor_sdk').append('<div class="doc-placeholder">' + '<div class="columns"></div>'.repeat(2) + '</div>');
 
                 // Localization uiApp params
                 uiApp.params.modalButtonOk = me.textOK;
@@ -240,6 +239,9 @@ define([
 
                if (me.appOptions.location == 'us' || me.appOptions.location == 'ca')
                    Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch);
+
+                if (!me.editorConfig.customization || !(me.editorConfig.customization.loaderName || me.editorConfig.customization.loaderLogo))
+                    $('#editor_sdk').append('<div class="doc-placeholder">' + '<div class="columns"></div>'.repeat(2) + '</div>');
             },
 
             loadDocument: function(data) {
diff --git a/apps/spreadsheeteditor/mobile/index.html.deploy b/apps/spreadsheeteditor/mobile/index.html.deploy
index 79a4ef323..ac3aa97aa 100644
--- a/apps/spreadsheeteditor/mobile/index.html.deploy
+++ b/apps/spreadsheeteditor/mobile/index.html.deploy
@@ -22,164 +22,126 @@
                 overflow: hidden;
                 border: none;
                 background-color: #f4f4f4;
-                z-index: 100;
+                z-index: 10000;
             }
-
-            .loader-page {
+            .loadmask > .brendpanel {
                 width: 100%;
-                height: 170px;
-                bottom: 42%;
                 position: absolute;
-                text-align: center;
-                line-height: 10px;
+                height: 44px;
+                background-color: #e2e2e2;
+                opacity: 0;
             }
 
-            .loader-logo {
-                max-height: 160px;
-                margin-bottom: 10px;
+            .loadmask > .brendpanel.visible {
+                opacity: 1;
             }
 
-            .loader-page-romb {
-                width: 40px;
+            .loadmask > .brendpanel.android {
+                height: 56px;
+                background: #40865c;
+            }
+
+            .loadmask > .brendpanel > div {
+                display: flex;
+                align-items: center;
+                height: 100%;
+            }
+
+            .loadmask > .brendpanel .loading-logo {
+                max-width: 200px;
+                height: 20px;
+                margin: 0 auto;
+            }
+
+            .loadmask > .brendpanel .loading-logo > img {
                 display: inline-block;
+                max-width: 100px;
+                max-height: 20px;
+                opacity: 0;
             }
 
-            .loader-page-text {
+            .loadmask > .brendpanel .circle {
+                vertical-align: middle;
+                width: 28px;
+                height: 28px;
+                border-radius: 14px;
+                margin: 4px 10px;
+                background: rgba(255, 255, 255, 0.2);
+            }
+
+            .loadmask > .placeholder {
+                background: #fbfbfb;
                 width: 100%;
-                bottom: 42%;
+                height: 100%;
+                border: 1px solid #dfdfdf;
+                white-space: nowrap;
+                padding-top: 43px;
+            }
+
+            .loadmask > .placeholder.android {
+                padding-top: 56px;
+            }
+
+            .loadmask > .placeholder > .columns {
+                width: 100%;
+                height: 100%;
+                display: inline-block;
+                background: linear-gradient(90deg, #d5d5d5 0px, rgba(0,0,0,0) 1px) 0 0,
+                linear-gradient(rgba(0,255,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;
+            }
+
+            .loadmask > .placeholder > .columns:first-child {
                 position: absolute;
-                text-align: center;
-                color: #888;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                line-height: 20px;
+                background: linear-gradient(#f1f1f1 19px, #d5d5d5 20px) 0 0;
+                background-size: 20px 20px;
+                width: 35px;
             }
 
-            .loader-page-text-loading {
-                font-size: 14px;
+            @keyframes flickerAnimation {
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            .loader-page-text-customer {
-                font-size: 16px;
-                margin-bottom: 5px;
+            @-o-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            .romb {
-                width: 40px;
-                height: 40px;
-                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
-                -moz-transform: rotate(135deg) skew(20deg, 20deg);
-                -ms-transform: rotate(135deg) skew(20deg, 20deg);
-                -o-transform: rotate(135deg) skew(20deg, 20deg);
-                position: absolute;
-                background: red;
-                border-radius: 6px;
-                -webkit-animation: movedown 3s infinite ease;
-                -moz-animation: movedown 3s infinite ease;
-                -ms-animation: movedown 3s infinite ease;
-                -o-animation: movedown 3s infinite ease;
-                animation: movedown 3s infinite ease;
+            @-moz-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
-
-            #blue {
-                z-index: 3;
-                background: #55bce6;
-                -webkit-animation-name: blue;
-                -moz-animation-name: blue;
-                -ms-animation-name: blue;
-                -o-animation-name: blue;
-                animation-name: blue;
-            }
-
-            #red {
-                z-index:1;
-                background: #de7a59;
-                -webkit-animation-name: red;
-                -moz-animation-name: red;
-                -ms-animation-name: red;
-                -o-animation-name: red;
-                animation-name: red;
-            }
-
-            #green {
-                z-index: 2;
-                background: #a1cb5c;
-                -webkit-animation-name: green;
-                -moz-animation-name: green;
-                -ms-animation-name: green;
-                -o-animation-name: green;
-                animation-name: green;
-            }
-
-            @-webkit-keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0;}
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @keyframes red {
-                  0%    { top:120px; background: #de7a59; }
-                 10%    { top:120px; background: #F2CBBF; }
-                 14%    { background: #f4f4f4; top:120px; }
-                 15%    { background: #f4f4f4; top:0; }
-                 20%    { background: #E6E4E4; }
-                 30%    { background: #D2D2D2; }
-                 40%    { top:120px; }
-                100%    { top:120px; background: #de7a59; }
-            }
-
-            @-webkit-keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @keyframes green {
-                  0%    { top:110px; background: #a1cb5c; opacity:1; }
-                 10%    { top:110px; background: #CBE0AC; opacity:1; }
-                 14%    { background: #f4f4f4; top:110px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #EFEFEF; top:0; opacity:1; }
-                 30%    { background:#E6E4E4; }
-                 70%    { top:110px; }
-                100%    { top:110px; background: #a1cb5c; }
-            }
-
-            @-webkit-keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #f4f4f4; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
-            }
-
-            @keyframes blue {
-                  0%    { top:100px; background: #55bce6; opacity:1; }
-                 10%    { top:100px; background: #BFE8F8; opacity:1; }
-                 14%    { background: #f4f4f4; top:100px; opacity:1; }
-                 15%    { background: #f4f4f4; top:0; opacity:1; }
-                 20%    { background: #f4f4f4; top:0; opacity:0; }
-                 25%    { background: #fff; top:0; opacity:0; }
-                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
-                100%    { top:100px; background: #55bce6; }
+            @-webkit-keyframes flickerAnimation{
+                0%   { opacity:1; }
+                50%  { opacity:0.3; }
+                100% { opacity:1; }
             }
         </style>
     </head>
     <body>
+        <div id="loading-mask" class="loadmask">
+            <div class="brendpanel">
+                <div>
+                    <div class="circle"></div>
+                    <div class="loading-logo">
+                        <img src="../../common/mobile/resources/img/header/header-logo.png">
+                    </div>
+                    <div class="circle"></div>
+                </div>
+            </div>
+            <div class="placeholder">
+                <div class="columns"></div>
+                <div class="columns"></div>
+            </div>
+        </div>
         <script type="text/javascript">
             var ua = navigator.userAgent;
 
@@ -218,48 +180,26 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                margin = (customer !== '') ? 50 : 20,
-                loading = 'Loading...',
-                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
 
                 window.frameEditorId = params["frameEditorId"];
 
-            if ( lang == 'de')      loading = 'Ladevorgang...';
-            else if ( lang == 'es') loading = 'Cargando...';
-            else if ( lang == 'fr') loading = 'Chargement en cours...';
-            else if ( lang == 'it') loading = 'Caricamento in corso...';
-            else if ( lang == 'pt') loading = 'Carregando...';
-            else if ( lang == 'ru') loading = 'Загрузка...';
-            else if ( lang == 'sl') loading = 'Nalaganje...';
-            else if ( lang == 'tr') loading = 'Yükleniyor...';
-            else if ( lang == 'bg') loading = 'Зареждане...';
-            else if ( lang == 'cs') loading = 'Nahrávám...';
-            else if ( lang == 'hu') loading = 'Betöltés...';
-            else if ( lang == 'ja') loading = '読み込み中...';
-            else if ( lang == 'ko') loading = '로드 중...';
-            else if ( lang == 'lv') loading = 'Ieladēšana ...';
-            else if ( lang == 'nl') loading = 'Laden...';
-            else if ( lang == 'pl') loading = 'Ładowanie...';
-            else if ( lang == 'sk') loading = 'Nahrávam...';
-            else if ( lang == 'uk') loading = 'Завантаження...';
-            else if ( lang == 'vi') loading = 'Đang tải...';
-            else if ( lang == 'zh') loading = '加载中...';
-
-            document.write(
-                '<div id="loading-mask" class="loadmask">' +
-                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                        ((logo!==null) ? logo :
-                        '<div class="loader-page-romb">' +
-                            '<div class="romb" id="blue"></div>' +
-                            '<div class="romb" id="green"></div>' +
-                            '<div class="romb" id="red"></div>' +
-                        '</div>') +
-                    '</div>' +
-                    '<div class="loader-page-text">' +  customer +
-                    '<div class="loader-page-text-loading">' + loading + '</div>' +
-                    '</div>' +
-                '</div>');
+            var brendpanel = document.getElementsByClassName('brendpanel')[0];
+            if (brendpanel) {
+                if (/Android/.test(navigator.userAgent)) {
+                    brendpanel.classList.add('android');
+                }
+                brendpanel.classList.add('visible');
+                var elem = document.querySelector('.loading-logo img');
+                if (elem) {
+                    logo && (elem.setAttribute('src', logo));
+                    elem.style.opacity = 1;
+                }
+            }
+            var placeholder = document.getElementsByClassName('placeholder')[0];
+            if (placeholder && /Android/.test(navigator.userAgent)) {
+                placeholder.classList.add('android');
+            }
 
             window.requireTimeourError = function(){
                 var reqerr;
@@ -288,6 +228,5 @@
 
         <div id="viewport"></div>
         <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
-
     </body>
 </html>
diff --git a/apps/spreadsheeteditor/mobile/index_loader.html.deploy b/apps/spreadsheeteditor/mobile/index_loader.html.deploy
new file mode 100644
index 000000000..79a4ef323
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/index_loader.html.deploy
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta name="mobile-web-app-capable" content="yes">
+
+        <title>ONLYOFFICE Spreadsheet Editor</title>
+
+        <link rel="stylesheet" type="text/css" href="../../../../sdkjs/cell/css/main-mobile.css"/>
+        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+
+        <style type="text/css">
+            .loadmask {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                border: none;
+                background-color: #f4f4f4;
+                z-index: 100;
+            }
+
+            .loader-page {
+                width: 100%;
+                height: 170px;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                line-height: 10px;
+            }
+
+            .loader-logo {
+                max-height: 160px;
+                margin-bottom: 10px;
+            }
+
+            .loader-page-romb {
+                width: 40px;
+                display: inline-block;
+            }
+
+            .loader-page-text {
+                width: 100%;
+                bottom: 42%;
+                position: absolute;
+                text-align: center;
+                color: #888;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                line-height: 20px;
+            }
+
+            .loader-page-text-loading {
+                font-size: 14px;
+            }
+
+            .loader-page-text-customer {
+                font-size: 16px;
+                margin-bottom: 5px;
+            }
+
+            .romb {
+                width: 40px;
+                height: 40px;
+                -webkit-transform: rotate(135deg) skew(20deg, 20deg);
+                -moz-transform: rotate(135deg) skew(20deg, 20deg);
+                -ms-transform: rotate(135deg) skew(20deg, 20deg);
+                -o-transform: rotate(135deg) skew(20deg, 20deg);
+                position: absolute;
+                background: red;
+                border-radius: 6px;
+                -webkit-animation: movedown 3s infinite ease;
+                -moz-animation: movedown 3s infinite ease;
+                -ms-animation: movedown 3s infinite ease;
+                -o-animation: movedown 3s infinite ease;
+                animation: movedown 3s infinite ease;
+            }
+
+            #blue {
+                z-index: 3;
+                background: #55bce6;
+                -webkit-animation-name: blue;
+                -moz-animation-name: blue;
+                -ms-animation-name: blue;
+                -o-animation-name: blue;
+                animation-name: blue;
+            }
+
+            #red {
+                z-index:1;
+                background: #de7a59;
+                -webkit-animation-name: red;
+                -moz-animation-name: red;
+                -ms-animation-name: red;
+                -o-animation-name: red;
+                animation-name: red;
+            }
+
+            #green {
+                z-index: 2;
+                background: #a1cb5c;
+                -webkit-animation-name: green;
+                -moz-animation-name: green;
+                -ms-animation-name: green;
+                -o-animation-name: green;
+                animation-name: green;
+            }
+
+            @-webkit-keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0;}
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @keyframes red {
+                  0%    { top:120px; background: #de7a59; }
+                 10%    { top:120px; background: #F2CBBF; }
+                 14%    { background: #f4f4f4; top:120px; }
+                 15%    { background: #f4f4f4; top:0; }
+                 20%    { background: #E6E4E4; }
+                 30%    { background: #D2D2D2; }
+                 40%    { top:120px; }
+                100%    { top:120px; background: #de7a59; }
+            }
+
+            @-webkit-keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @keyframes green {
+                  0%    { top:110px; background: #a1cb5c; opacity:1; }
+                 10%    { top:110px; background: #CBE0AC; opacity:1; }
+                 14%    { background: #f4f4f4; top:110px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #EFEFEF; top:0; opacity:1; }
+                 30%    { background:#E6E4E4; }
+                 70%    { top:110px; }
+                100%    { top:110px; background: #a1cb5c; }
+            }
+
+            @-webkit-keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #f4f4f4; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+
+            @keyframes blue {
+                  0%    { top:100px; background: #55bce6; opacity:1; }
+                 10%    { top:100px; background: #BFE8F8; opacity:1; }
+                 14%    { background: #f4f4f4; top:100px; opacity:1; }
+                 15%    { background: #f4f4f4; top:0; opacity:1; }
+                 20%    { background: #f4f4f4; top:0; opacity:0; }
+                 25%    { background: #fff; top:0; opacity:0; }
+                 45%    { background: #EFEFEF; top:0; opacity:0.2; }
+                100%    { top:100px; background: #55bce6; }
+            }
+        </style>
+    </head>
+    <body>
+        <script type="text/javascript">
+            var ua = navigator.userAgent;
+
+            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
+                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
+
+                    if (!/Android/.test(ua)) {
+                        var ua = navigator.userAgent + ';Android 5.0;';
+                        Object.defineProperty(navigator, 'userAgent', {
+                            get: function () { return ua; }
+                        });
+                    }
+            }
+
+            function getUrlParams() {
+                var e,
+                    a = /\+/g,  // Regex for replacing addition symbol with a space
+                    r = /([^&=]+)=?([^&]*)/g,
+                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
+                    q = window.location.search.substring(1),
+                    urlParams = {};
+
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
+
+                return urlParams;
+            }
+
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
+
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+                window.frameEditorId = params["frameEditorId"];
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+            else if ( lang == 'bg') loading = 'Зареждане...';
+            else if ( lang == 'cs') loading = 'Nahrávám...';
+            else if ( lang == 'hu') loading = 'Betöltés...';
+            else if ( lang == 'ja') loading = '読み込み中...';
+            else if ( lang == 'ko') loading = '로드 중...';
+            else if ( lang == 'lv') loading = 'Ieladēšana ...';
+            else if ( lang == 'nl') loading = 'Laden...';
+            else if ( lang == 'pl') loading = 'Ładowanie...';
+            else if ( lang == 'sk') loading = 'Nahrávam...';
+            else if ( lang == 'uk') loading = 'Завантаження...';
+            else if ( lang == 'vi') loading = 'Đang tải...';
+            else if ( lang == 'zh') loading = '加载中...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
+
+            window.requireTimeourError = function(){
+                var reqerr;
+
+                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
+                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
+                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
+                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
+                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
+
+                return reqerr;
+            };
+
+            var requireTimeoutID = setTimeout(function(){
+                window.alert(window.requireTimeourError());
+                window.location.reload();
+            }, 30000);
+
+            var require = {
+                waitSeconds: 30,
+                callback: function(){
+                    clearTimeout(requireTimeoutID);
+                }
+            };
+        </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
+
+    </body>
+</html>
diff --git a/build/documenteditor.json b/build/documenteditor.json
index f1f10d5c6..4576d80e6 100644
--- a/build/documenteditor.json
+++ b/build/documenteditor.json
@@ -170,8 +170,8 @@
                     "dest": "../deploy/web-apps/apps/documenteditor/main/index.html"
                 },
                 {
-                  "src": "../apps/documenteditor/main/index_loader.html.deploy",
-                  "dest": "../deploy/web-apps/apps/documenteditor/main/index_loader.html"
+                    "src": "../apps/documenteditor/main/index_loader.html.deploy",
+                    "dest": "../deploy/web-apps/apps/documenteditor/main/index_loader.html"
                 }
             ]
         },
@@ -339,7 +339,8 @@
                 }
             ],
             "index-page": {
-                "../deploy/web-apps/apps/documenteditor/mobile/index.html": "../apps/documenteditor/mobile/index.html.deploy"
+                "../deploy/web-apps/apps/documenteditor/mobile/index.html": "../apps/documenteditor/mobile/index.html.deploy",
+                "../deploy/web-apps/apps/documenteditor/mobile/index_loader.html": "../apps/documenteditor/mobile/index_loader.html.deploy"
             },
             "localization": [
                 {
diff --git a/build/presentationeditor.json b/build/presentationeditor.json
index 4c63db80f..64a0c8ce9 100644
--- a/build/presentationeditor.json
+++ b/build/presentationeditor.json
@@ -342,7 +342,8 @@
                 }
             ],
             "index-page": {
-                "../deploy/web-apps/apps/presentationeditor/mobile/index.html": "../apps/presentationeditor/mobile/index.html.deploy"
+                "../deploy/web-apps/apps/presentationeditor/mobile/index.html": "../apps/presentationeditor/mobile/index.html.deploy",
+                "../deploy/web-apps/apps/presentationeditor/mobile/index_loader.html": "../apps/presentationeditor/mobile/index_loader.html.deploy"
             },
             "localization": [
                 {
diff --git a/build/spreadsheeteditor.json b/build/spreadsheeteditor.json
index e9d2d6eb3..8dca7d52c 100644
--- a/build/spreadsheeteditor.json
+++ b/build/spreadsheeteditor.json
@@ -344,7 +344,8 @@
                 }
             ],
             "index-page": {
-                "../deploy/web-apps/apps/spreadsheeteditor/mobile/index.html": "../apps/spreadsheeteditor/mobile/index.html.deploy"
+                "../deploy/web-apps/apps/spreadsheeteditor/mobile/index.html": "../apps/spreadsheeteditor/mobile/index.html.deploy",
+                "../deploy/web-apps/apps/spreadsheeteditor/mobile/index_loader.html": "../apps/spreadsheeteditor/mobile/index_loader.html.deploy"
             },
             "localization": [
                 {