Fix loading screen in login and register

customize.dist/loading.js

@@ -0,0 +1,145 @@
+// dark #326599
+// light #4591c4
+define([], function () {
+    var loadingStyle = (function(){/*
+#cp-loading {
+  transition: opacity 0.75s, visibility 0s 0.75s;
+  visibility: visible;
+  position: fixed;
+  z-index: 10000000;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
+  color: #fafafa;
+  font-size: 1.5em;
+  opacity: 1;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+#cp-loading.cp-loading-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+#cp-loading .cp-loading-logo {
+    height: 300px;
+    width: 300px;
+    margin-top: 50px;
+    flex: 0 1 auto;
+    min-height: 0;
+    text-align: center;
+}
+#cp-loading .cp-loading-logo img {
+    max-width: 100%;
+    max-height: 100%;
+}
+#cp-loading .cp-loading-container {
+    width: 700px;
+    max-width: 90vw;
+    height: 500px;
+    max-height: calc(100vh - 20px);
+    margin: 50px;
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    justify-content: space-evenly;
+    align-items: center;
+}
+@media screen and (max-height: 800px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
+}
+@media screen and (max-width: 600px) {
+    #cp-loading .cp-loading-container {
+        height: auto;
+    }
+}
+#cp-loading .cp-loading-cryptofist {
+  margin-left: auto;
+  margin-right: auto;
+  //height: 300px;
+  max-width: 90vw;
+  max-height: 300px;
+  width: auto;
+  height: auto;
+  margin-bottom: 2em;
+}
+@media screen and (max-height: 450px) {
+  #cp-loading .cp-loading-cryptofist {
+  }
+}
+#cp-loading-message {
+    background: #FFF;
+    padding: 20px;
+    width: 100%;
+    color: #000;
+    text-align: center;
+    display: none;
+}
+#cp-loading .cp-loading-spinner-container {
+  position: relative;
+  height: 100px;
+}
+#cp-loading .cp-loading-spinner-container > div {
+  height: 100px;
+}
+#cp-loading-tip {
+  position: fixed;
+  z-index: 10000000;
+  top: 80%;
+  left: 0;
+  right: 0;
+  text-align: center;
+  transition: opacity 750ms;
+  transition-delay: 3000ms;
+}
+@media screen and (max-height: 600px) {
+  #cp-loading-tip {
+    display: none;
+  }
+}
+#cp-loading-tip span {
+  background: #222;
+  color: #fafafa;
+  text-align: center;
+  font-size: 1.5em;
+  opacity: 0.7;
+  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
+  padding: 15px;
+  max-width: 60%;
+  display: inline-block;
+}
+*/}).toString().slice(14, -3);
+    var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
+    var elem = document.createElement('div');
+    elem.setAttribute('id', 'cp-loading');
+    elem.innerHTML = [
+        '<style>',
+        loadingStyle,
+        '</style>',
+        '<div class="cp-loading-logo">',
+            '<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
+        '</div>',
+        '<div class="cp-loading-container">',
+            '<div class="cp-loading-spinner-container">',
+                '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
+            '</div>',
+            '<p id="cp-loading-message"></p>',
+        '</div>'
+    ].join('');
+    return function () {
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
+    };
+});

customize.dist/login.js

@@ -213,6 +213,7 @@ define([
                 loadingText: Messages.login_hashing,
                 hideTips: true,
             });
+
             // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed
             // after hashing the password
             window.setTimeout(function () {

customize.dist/pages.js

@@ -626,19 +626,6 @@ define([
         ];
     };
 
-    var loadingScreen = Pages.loadingScreen = function () {
-        return h('div#cp-loading', 
-            h('div.cp-loading-container', [
-                h('img.cp-loading-cryptofist', {
-                    src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
-                }),
-                h('div.cp-loading-spinner-container',
-                    h('span.fa.fa-circle-o-notch.fa-spin.fa-8x.fa-fw')),
-                h('p'),
-            ])
-        );
-    };
-
     Pages.createCheckbox = function (id, labelTxt, checked, opts) {
         opts = opts|| {};
         // Input properties
@@ -722,12 +709,6 @@ define([
         ]);
     };
 
-    var hiddenLoader = function () {
-        var loader = loadingScreen();
-        loader.style.display = 'none';
-        return loader;
-    };
-
     Pages['/user/'] = Pages['/user/index.html'] = function () {
         return h('div#container');
     };
@@ -789,7 +770,6 @@ define([
             ]),
 
             infopageFooter(),
-            hiddenLoader(),
         ])];
     };
 
@@ -825,7 +805,6 @@ define([
                 ]),
             ]),
             infopageFooter(),
-            hiddenLoader(),
         ])];
     };
 

customize.dist/src/less2/loading.less

@@ -1,73 +0,0 @@
-/*
-WARNING: THIS FILE DOES NOTHING
-It exists only as a proposal of what CSS you should use in loading.js
-The CSS inside of loading.js is precompiled in order to save 200ish milliseconds to the loading screen.
-*/
-@import (once) "./include/colortheme-all.less";
-@import (once) "./include/browser.less";
-
-#cp-loading {
-    transition: opacity 0.75s, visibility 0s 0.75s;
-    visibility: visible;
-    opacity: 1;
-    position: fixed;
-    z-index: 10000000; // #loading
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background: @colortheme_loading-bg;
-    color: @colortheme_loading-color;
-    text-align: center;
-    font-size: 1.5em;
-    .cp-loading-container {
-        margin-top: 50vh;
-        transform: translateY(-50%);
-    }
-    .cp-loading-cryptofist {
-        margin-left: auto;
-        margin-right: auto;
-        height: 300px;
-        margin-bottom: 2em;
-        @media screen and (max-height: @browser_media-short-screen) {
-            display: none;
-        }
-    }
-    .cp-loading-spinner-container {
-        position: relative;
-        height: 100px;
-        > div {
-            height: 100px;
-        }
-    }
-    &.cp-loading-hidden {
-        opacity: 0;
-        visibility: hidden;
-    }
-}
-#cp-loading-tip {
-    position: fixed;
-    z-index: 10000000; // loading tip
-    top: 80%;
-    left: 0;
-    right: 0;
-    text-align: center;
-
-    transition: opacity 750ms;
-    transition-delay: 3000ms;
-    @media screen and (max-height: @browser_media-medium-screen) {
-        display: none;
-    }
-    span {
-        background: @colortheme_loading-bg;
-        color: @colortheme_loading-color;
-        text-align: center;
-        font-size: 1.5em;
-        opacity: 0.7;
-        font-family: @colortheme_font;
-        padding: 15px;
-        max-width: 60%;
-        display: inline-block;
-    }
-}
-

customize.dist/src/less2/pages/page-login.less

@@ -2,7 +2,6 @@
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
 @import (once) "../include/checkmark.less";
-@import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();

customize.dist/src/less2/pages/page-register.less

@@ -2,7 +2,6 @@
 @import (once) "../include/colortheme-all.less";
 @import (once) "../include/alertify.less";
 @import (once) "../include/checkmark.less";
-@import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();

www/common/common-interface.js

@@ -9,12 +9,13 @@ define([
     '/common/tippy/tippy.min.js',
     '/customize/pages.js',
     '/common/hyperscript.js',
+    '/customize/loading.js',
     '/common/test.js',
 
     '/bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js',
     'css!/common/tippy/tippy.css',
 ], function ($, Messages, Util, Hash, Notifier, AppConfig,
-            Alertify, Tippy, Pages, h, Test) {
+            Alertify, Tippy, Pages, h, Loading, Test) {
     var UI = {};
 
     /*
@@ -551,7 +552,7 @@ define([
         //var hideTips = config.hideTips || AppConfig.hideLoadingScreenTips;
         var hideLogo = config.hideLogo;
         var $loading, $container;
-        if ($('#' + LOADING).length) {
+        var todo = function () {
             $loading = $('#' + LOADING); //.show();
             $loading.css('display', '');
             $loading.removeClass('cp-loading-hidden');
@@ -561,27 +562,13 @@ define([
             } else {
                 $('#' + LOADING).find('p').hide().text('');
             }
-            $container = $loading.find('.cp-loading-container');
+        };
+        if ($('#' + LOADING).length) {
+            todo();
         } else {
-            $loading = $(Pages.loadingScreen());
+            Loading();
-            $container = $loading.find('.cp-loading-container');
+            todo();
-            if (hideLogo) {
-                $loading.find('img').hide();
-            } else {
-                $loading.find('img').show();
-            }
-            var $spinner = $loading.find('.cp-loading-spinner-container');
-            $spinner.show();
-            $('body').append($loading);
         }
-        /*if (Messages.tips && !hideTips) {
-            var $loadingTip = $('<div>', {'id': 'cp-loading-tip'});
-            $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
-            $loadingTip.css({
-                'bottom': $('body').height()/2 - $container.height()/2 + 20 + 'px'
-            });
-            $('body').append($loadingTip);
-        }*/
     };
     UI.removeLoadingScreen = function (cb) {
         // Release the test blocker, hopefully every test has been registered.
@@ -591,7 +578,6 @@ define([
 
         $('#' + LOADING).addClass("cp-loading-hidden");
         setTimeout(cb, 750);
-        //$('#' + LOADING).fadeOut(750, cb);
         var $tip = $('#cp-loading-tip').css('top', '')
         // loading.less sets transition-delay: $wait-time
         // and               transition: opacity $fadeout-time

www/common/loading.js

@@ -1,141 +1,3 @@
-// dark #326599
+require(['/customize/loading.js'], function (Loading) {
-// light #4591c4
+    Loading();
-define([], function () {
-    var loadingStyle = (function(){/*
-#cp-loading {
-  transition: opacity 0.75s, visibility 0s 0.75s;
-  visibility: visible;
-  position: fixed;
-  z-index: 10000000;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  background: linear-gradient(to right, #326599 0%, #326599 50%, #4591c4 50%, #4591c4 100%);
-  color: #fafafa;
-  font-size: 1.5em;
-  opacity: 1;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-#cp-loading.cp-loading-hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-#cp-loading .cp-loading-logo {
-    height: 300px;
-    width: 300px;
-    margin-top: 50px;
-    flex: 0 1 auto;
-    min-height: 0;
-    text-align: center;
-}
-#cp-loading .cp-loading-logo img {
-    max-width: 100%;
-    max-height: 100%;
-}
-#cp-loading .cp-loading-container {
-    width: 700px;
-    max-width: 90vw;
-    height: 500px;
-    max-height: calc(100vh - 20px);
-    margin: 50px;
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-}
-@media screen and (max-height: 800px) {
-    #cp-loading .cp-loading-container {
-        height: auto;
-    }
-}
-@media screen and (max-width: 600px) {
-    #cp-loading .cp-loading-container {
-        height: auto;
-    }
-}
-#cp-loading .cp-loading-cryptofist {
-  margin-left: auto;
-  margin-right: auto;
-  //height: 300px;
-  max-width: 90vw;
-  max-height: 300px;
-  width: auto;
-  height: auto;
-  margin-bottom: 2em;
-}
-@media screen and (max-height: 450px) {
-  #cp-loading .cp-loading-cryptofist {
-  }
-}
-#cp-loading-message {
-    background: #FFF;
-    padding: 20px;
-    width: 100%;
-    color: #000;
-    display: none;
-}
-#cp-loading .cp-loading-spinner-container {
-  position: relative;
-  height: 100px;
-}
-#cp-loading .cp-loading-spinner-container > div {
-  height: 100px;
-}
-#cp-loading-tip {
-  position: fixed;
-  z-index: 10000000;
-  top: 80%;
-  left: 0;
-  right: 0;
-  text-align: center;
-  transition: opacity 750ms;
-  transition-delay: 3000ms;
-}
-@media screen and (max-height: 600px) {
-  #cp-loading-tip {
-    display: none;
-  }
-}
-#cp-loading-tip span {
-  background: #222;
-  color: #fafafa;
-  text-align: center;
-  font-size: 1.5em;
-  opacity: 0.7;
-  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
-  padding: 15px;
-  max-width: 60%;
-  display: inline-block;
-}
-*/}).toString().slice(14, -3);
-    var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
-    var elem = document.createElement('div');
-    elem.setAttribute('id', 'cp-loading');
-    elem.innerHTML = [
-        '<style>',
-        loadingStyle,
-        '</style>',
-        '<div class="cp-loading-logo">',
-            '<img class="cp-loading-cryptofist" src="/customize/loading-logo.png?' + urlArgs + '">',
-        '</div>',
-        '<div class="cp-loading-container">',
-            '<div class="cp-loading-spinner-container">',
-                '<span class="fa fa-circle-o-notch fa-spin fa-4x fa-fw"></span>',
-            '</div>',
-            '<p id="cp-loading-message"></p>',
-        '</div>'
-    ].join('');
-    var intr;
-    var append = function () {
-        if (!document.body) { return; }
-        clearInterval(intr);
-        document.body.appendChild(elem);
-    };
-    intr = setInterval(append, 100);
-    append();
 });