Merge branch 'placeholder-slow-connection' into 5.1-candidate

customize.dist/pre-loading.js

@@ -15,16 +15,44 @@ elem.innerHTML = [
     '</div>'
 ].join('');
 
+var key = 'CRYPTPAD_STORE|colortheme'; // handle outer
+if (localStorage[key] && localStorage[key] === 'dark') {
+    elem.classList.add('dark-theme');
+}
+if (!localStorage[key] && localStorage[key+'_default'] && localStorage[key+'_default'] === 'dark') {
+    elem.classList.add('dark-theme');
+}
+
+var req;
+try {
+    req = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
+    if ((req.theme || req.themeOS) === 'dark') { // handle inner
+        elem.classList.add('dark-theme');
+    }
+} 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)) {
+        try {
+            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';
+        } catch (err) {}
+    }
+
     // fallback if CSS animations not available
     setTimeout(() => {
         try {
             document.querySelector('.placeholder-logo-container').style.opacity = 100;
             document.querySelector('.placeholder-message-container').style.opacity = 100;
-        } catch (err) {
-            console.error(err);
-        }
+        } catch (e) {}
     }, 3000);
 });
 }());

customize.dist/src/pre-loading.css

@@ -9,6 +9,14 @@
   font-style: normal;
 }
 
+.cp-app-noscroll body {
+    background: transparent;
+}
+.cp-app-noscroll #placeholder {
+    z-index: 9999999; /* loading screen -1 */
+    background-color: transparent;
+}
+
 #placeholder {
     visibility: visible;
     position: fixed;
@@ -28,12 +36,11 @@
     align-items: center;
     font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important;
 }
-@media (prefers-color-scheme: dark) {
-    #placeholder {
-        background-color: #212121; /* @cp_loading-bg (dark) */
-        color: #EEEEEE; /* @cp_loading-fg (dark) */
-    }
+#placeholder.dark-theme {
+    background-color: #212121; /* @cp_loading-bg (dark) */
+    color: #EEEEEE; /* @cp_loading-fg (dark) */
 }
+
 #placeholder .placeholder-logo-container {
     height: 300px;
     width: 300px;
@@ -61,6 +68,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;