Manual merge, update the CSS in loading.js and document that loading.less does nothing.

customize.dist/src/less2/include/alertify.less

@@ -64,7 +64,7 @@
         bottom: 0;
         width: 100%;
         height: 100%;
-        z-index: 99999; // alertify container
+        z-index: 100000; // alertify container
         &.forefront {
             z-index: @max-z-index; // alertify max forefront
         }

customize.dist/src/less2/include/colortheme.less

@@ -21,6 +21,9 @@
 @colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
 @colortheme_modal-dim: rgba(0, 0, 0, 0.4);
 
+@colortheme_loading-bg: #222;
+@colortheme_loading-color: @colortheme_old-fore;
+
 @colortheme_modal-input: #111;
 
 @colortheme_alertify-red: #E55236;

customize.dist/src/less2/include/dropdown.less

@@ -28,7 +28,7 @@
             background-color: @colortheme_dropdown-bg;
             min-width: 250px;
             box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
-            z-index: 1000;
+            z-index: 1000; //Z dropdown content
             max-height: 300px;
             overflow-y: auto;
             font: @dropdown_font;

customize.dist/src/less2/include/fileupload.less

@@ -10,7 +10,7 @@
         bottom: 10vh;
         opacity: 0.9;
         box-sizing: border-box;
-        z-index: 1000000;
+        z-index: 1000000; //Z file upload table container
         display: none;
         #cp-fileupload-table {
             width: 80vw;
@@ -40,7 +40,7 @@
                 left: @upload_pad_v;
                 top: @upload_pad_h; bottom: @upload_pad_h;
                 background-color: rgba(0,0,255,0.3);
-                z-index: -1;
+                z-index: -1; //Z file upload progress container
             }
             .cp-fileupload-table-cancel { text-align: center; }
             .fa.cancel {

customize.dist/src/less2/include/infopages.less

@@ -117,7 +117,7 @@
 .infopages_topbar () {
     .cp-topbar {
         background: #fff;
-        z-index: 9001;
+        z-index: 10000; //Z infopage toolbar
         position: fixed;
         top: 0;
         display: flex;

customize.dist/src/less2/include/modal.less

@@ -20,7 +20,7 @@
 .cp-modal-container {
     display: none;
 
-    z-index: 100000;
+    z-index: 100000; //Z modal container
     position: absolute;
     top: 0;
     bottom: 0;

customize.dist/src/less2/include/toolbar.less

@@ -274,7 +274,7 @@
 
         font: @toolbar_button-font;
         width: 100%;
-        z-index: 9001;
+        z-index: 10000; // cp-toolbar
 
         .cp-dropdown-container {
             //height: 100%;
@@ -597,7 +597,7 @@
                 vertical-align: top;
             }
             .cp-toolbar-user-dropdown {
-                z-index: 10000;
+                z-index: 10000; //Z cp-toolbar-user-dropdown
                 //margin-left: 20px;
                 height: 64px;
                 width: 64px;
@@ -737,7 +737,7 @@
             background: @colortheme_dropdown-bg;
             display: flex;
             flex-flow: column;
-            z-index:10000;
+            z-index:10000; //Z cp-toolbar-drawer-content
             color: black;
             .fa {
                 font-size: 17px;

customize.dist/src/less2/loading.less

@@ -0,0 +1,66 @@
+/*
+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.less";
+@import (once) "./include/browser.less";
+
+#cp-loading {
+    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-tip {
+    position: fixed;
+    z-index: 100000; // 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

@@ -1,6 +1,7 @@
 @import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
 @import (once) "../include/alertify.less";
+@import (once) "../loading.less";
 
 .infopages_main();
 .infopages_topbar();
@@ -75,4 +76,4 @@
 .cp-container {
 	padding-top: 3em;
 	min-height: 66vh;
-}
+}

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

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