Improve transition from outer placeholder to inner one

customize.dist/pre-loading.js

@@ -15,8 +15,26 @@ elem.innerHTML = [
     '</div>'
 ].join('');
 
+var req;
+try {
+    req = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
+    }
+} catch (e) {}
+
 document.addEventListener('DOMContentLoaded', function() {
     document.body.appendChild(elem);
+    window.CP_preloadingTime = +new Date();
+
+    // soft transition between inner and outer placeholders
+    if (req && req.time && (+new Date() - req.time > 2000)) {
+        var logo = document.querySelector('.placeholder-logo-container');
+        var message = document.querySelector('.placeholder-message-container');
+        logo.style.opacity = 100;
+        message.style.opacity = 100;
+        logo.style.animation = 'none';
+        message.style.animation = 'none';
+    }
+
     // fallback if CSS animations not available
     setTimeout(() => {
         try {

customize.dist/src/pre-loading.css

@@ -9,8 +9,12 @@
   font-style: normal;
 }
 
+.cp-app-noscroll body {
+    background: transparent;
+}
 .cp-app-noscroll #placeholder {
     z-index: 9999999; /* loading screen -1 */
+    background-color: transparent;
 }
 
 #placeholder {
@@ -65,6 +69,9 @@
     opacity: 0;
     animation: fadein 5s ease 2s forwards;
 }
+#placeholder .placeholder-message-container p {
+    margin-top: 0;
+}
 #placeholder .placeholder-logo {
     margin-left: auto;
     margin-right: auto;

www/common/sframe-common-outer.js

@@ -51,7 +51,8 @@ define([
             pfx: window.location.origin,
             theme: localStorage[themeKey],
             themeOS: localStorage[themeKey+'_default'],
-            lang: lang
+            lang: lang,
+            time: window.CP_preloadingTime
         };
         window.rc = requireConfig;
         window.apiconf = ApiConfig;