Better boot response by splitting and embedding boot css/html into index.html

dev/Styles/@Boot.css

@@ -0,0 +1,57 @@
+html, body {
+	background-color: #eee;
+	font-family: "DejaVu Sans", Verdana, Geneva, "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background-color: #aaa;
+	color: #333;
+}
+
+#rl-content, #rl-loading-error {
+    display: none;
+}
+
+#rl-loading, #rl-loading-error {
+	font-size: 30px;
+	line-height: 130%;
+	position: fixed;
+	text-align: center;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 100%;
+}
+
+.e-spinner {
+	margin: 5px auto 0;
+	width: 100px;
+	text-align: center;
+}
+
+.e-spinner .e-bounce {
+	animation: bouncedelay 1.4s infinite ease-in-out;
+	background-color: #333;
+	border-radius: 100%;
+	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
+	display: inline-block;
+	height: 15px;
+	margin: 0 5px;
+	width: 15px;
+	/* Prevent first frame from flickering when animation starts */
+	animation-fill-mode: both;
+}
+
+.e-spinner .bounce1 {
+	animation-delay: -0.32s;
+}
+
+.e-spinner .bounce2 {
+	animation-delay: -0.16s;
+}
+
+@keyframes bouncedelay {
+	0%, 80%, 100% { transform: scale(0.0); }
+	40% { transform: scale(1.0); }
+}

dev/Styles/Animations.less

@@ -40,10 +40,6 @@ html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
 	opacity: 0.7;
 }*/
 
-#rl-loading {
-	transition: opacity 0.5s linear;
-}
-
 html.rl-started-delay {
 
 	#rl-left {

dev/Styles/Layout.less

@@ -419,29 +419,6 @@ html.rl-ctrl-key-pressed {
 	}
 }
 
-#rl-loading, #rl-loading-error {
-	position: absolute;
-	font-size: 30px;
-	line-height: 130%;
-	top: 50%;
-	width: 100%;
-	height: 65px;
-	margin: 0;
-	margin-top: -60px;
-	background-color: transparent;
-	text-align: center;
-	color: #000;
-}
-
-#rl-loading-error {
-	background-image: none;
-	display: none;
-}
-
-#rl-app{
-	display: none;
-}
-
 .rl-content-show {
 	display: block !important;
 }

dev/Styles/Ui.less

@@ -152,10 +152,6 @@
 	}
 }
 
-.e-spinner {
-	display: none;
-}
-
 .e-mobile-switcher {
 	margin-top: 8px;
 	color: #333;
@@ -187,43 +183,6 @@
 	}
 }
 
-html {
-
-	.e-spinner {
-		display: block;
-		margin: 5px auto 0;
-		width: 100px;
-		text-align: center;
-	}
-
-	.e-spinner .e-bounce {
-		width: 15px;
-		height: 15px;
-		background-color: #ddd;
-		margin: 0 5px;
-		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-
-		border-radius: 100%;
-		display: inline-block;
-		animation: bouncedelay 1.4s infinite ease-in-out;
-		/* Prevent first frame from flickering when animation starts */
-		animation-fill-mode: both;
-	}
-
-	.e-spinner .bounce1 {
-		animation-delay: -0.32s;
-	}
-
-	.e-spinner .bounce2 {
-		animation-delay: -0.16s;
-	}
-}
-
-@keyframes bouncedelay {
-  0%, 80%, 100% { transform: scale(0.0); }
-  40% { transform: scale(1.0); }
-}
-
 .command.command-disabled.hide-on-disabled-command {
 	display:none;
 }

dev/Styles/_progressjs.css

@@ -1,11 +1,4 @@
-.progressjs-inner {
+.progressjs {
-    width: 0;
-}
-.progressjs-progress {
-    z-index: 9999999;
-}
-
-.progressjs-theme-rainloop {
 	left: 0;
 	position: fixed;
 	top: 0;
@@ -13,17 +6,17 @@
 	z-index: 2000;
 }
 
-.progressjs-theme-rainloop .progressjs-inner {
+.progressjs-inner {
-
 	background-color: #939595;
-	position: relative;
-	z-index: 2000;
 	height: 3px;
 	overflow: hidden;
+	position: relative;
 	transition: width .5s;
+    width: 0;
+	z-index: 2000;
 }
 
-.progressjs-theme-rainloop .progressjs-percent {
+.progressjs-percent {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -31,10 +24,10 @@
 	bottom: 0;
 	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
 	background-size: 32px 32px;
-	animation: simple-pace-stripe-animation 500ms linear infinite;
+    animation: simple-pace-stripe-animation 500ms linear infinite;
 }
 
 @keyframes simple-pace-stripe-animation {
-	0% { transform: none; transform: none; }
+	0% { transform: none; }
-	100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
+	100% { transform: translate(-32px, 0); }
 }

dev/boot.js

@@ -78,9 +78,7 @@ const
 			script.onload = () => resolve();
 			script.onerror = () => reject(new Error(src));
 			script.src = src;
-//			script.type = 'text/javascript';
 			doc.head.append(script);
-//			doc.body.append(element);
 		});
 	},
 
@@ -97,17 +95,16 @@ const
 		}
 	};
 
-let container = doc.createElement('div'),
+if (!navigator || !navigator.cookieEnabled) {
-	progress = container.appendChild(doc.createElement("div")),
+	doc.location.replace('./?/NoCookie');
+}
+
+let container = doc.querySelector('.progressjs'),
+	progress = doc.querySelector('.progressjs-inner'),
 
 	RL_APP_DATA_STORAGE = {};
 
-container.className = 'progressjs-progress progressjs-theme-rainloop';
-progress.className = "progressjs-inner";
-progress.appendChild(doc.createElement('div')).className = "progressjs-percent";
-
 p.set(1);
-doc.body.append(container);
 
 Storage('local');
 Storage('session');
@@ -170,25 +167,11 @@ win.__initAppData = appData => {
 	rl.hash.set();
 
 	if (appData) {
-		const css = appData.IncludeCss,
+		if (appData.NewThemeLink) {
-			theme = appData.NewThemeLink,
+			(doc.getElementById('app-theme-link') || {}).href = appData.NewThemeLink;
-			description= appData.LoadingDescriptionEsc || '',
-			oE = doc.getElementById('rl-loading'),
-			oElDesc = doc.getElementById('rl-loading-desc');
-
-		if (theme) {
-			(doc.getElementById('app-theme-link') || {}).href = theme;
 		}
 
-		css && writeCSS(css);
+		appData.IncludeCss && writeCSS(appData.IncludeCss);
-
-		if (oElDesc && description) {
-			oElDesc.innerHTML = description;
-		}
-		if (oE && oE.style) {
-			oE.style.opacity = 0;
-			setTimeout(() => oE.style.opacity = 1, 300);
-		}
 	}
 
 	if (
@@ -246,32 +229,11 @@ win.__initAppData = appData => {
 	}
 };
 
-if (!navigator || !navigator.cookieEnabled) {
-	doc.location.replace('./?/NoCookie');
-}
-
-writeCSS('#rl-content{display:none;}.internal-hiddden{display:none !important;}');
-
 if (app) {
-	app.innerHTML = '<div id="rl-loading" class="thm-loading" style="opacity:0">\
+	['app-css','app-theme-link'].forEach(css => {
-	<div id="rl-loading-desc"></div>\
+		css = doc.getElementById(css);
-	<div class="e-spinner">\
+		css.href = css.dataset.href;
-		<div class="e-bounce bounce1"></div>\
+	});
-		<div class="e-bounce bounce2"></div>\
-		<div class="e-bounce bounce3"></div>\
-	</div>\
-</div>\
-<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>\
-<div id="rl-content">\
-	<div id="rl-popups"></div>\
-	<div id="rl-center">\
-		<div id="rl-top"></div>\
-		<div id="rl-left"></div>\
-		<div id="rl-right"></div>\
-	</div>\
-</div>\
-<div id="rl-templates"></div>\
-<div id="rl-hidden"></div>'.replace(/[\r\n\t]+/g, '');
 
 	loadScript('./?/'
 		+ (options.admin ? 'Admin' : '')
@@ -285,4 +247,4 @@ if (app) {
 		+ '/').then(() => {});
 }
 
-})(window);
+})(this);

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -1162,7 +1162,7 @@ class Actions
 
 /*
 required by Index.html and rl.js:
-NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash
+NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink AuthAccountHash
 */
 
 		$aResult = array(
@@ -1176,7 +1176,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack
 			'DevPassword' => '',
 			'Title' => $oConfig->Get('webmail', 'title', 'RainLoop Webmail'),
 			'LoadingDescription' => $oConfig->Get('webmail', 'loading_description', 'RainLoop'),
-			'LoadingDescriptionEsc' => 'RainLoop',
 			'FaviconUrl' => $oConfig->Get('webmail', 'favicon_url', ''),
 			'LoginDescription' => '',
 			'LoginLogo' => '',
@@ -1218,11 +1217,6 @@ NewThemeLink IncludeCss LoadingDescriptionEsc TemplatesLink LangLink IncludeBack
 			$aResult['AuthAccountHash'] = $sAuthAccountHash;
 		}
 
-		if ('' !== $aResult['LoadingDescription'] && 'RainLoop' !== $aResult['LoadingDescription'])
-		{
-			$aResult['LoadingDescriptionEsc'] = \htmlspecialchars($aResult['LoadingDescription'], ENT_QUOTES|ENT_IGNORE, 'UTF-8');
-		}
-
 		$oSettings = null;
 
 		if (!$bAdmin)

rainloop/v/0.0.0/app/libraries/RainLoop/Service.php

@@ -242,6 +242,8 @@ class Service
 		$sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png');
 		$sAppleTouchLink = $sFaviconUrl ? '' : $this->staticPath('apple-touch-icon.png');
 
+		$LoadingDescription = $this->oActions->Config()->Get('webmail', 'loading_description', 'RainLoop');
+
 		$aTemplateParameters = array(
 			'{{BaseAppHeadScriptLink}}' => '',
 			'{{BaseAppBodyScript}}' => '',
@@ -254,7 +256,9 @@ class Service
 			'{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2',
 			'{{BaseContentSecurityPolicy}}' => '',
 			'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
-			'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json')
+			'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'),
+			'{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot'.($bAppCssDebug ? '' : '.min').'.css'),
+			'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8')
 		);
 
 		$aTemplateParameters['{{RainloopBootData}}'] = \json_encode(array(

rainloop/v/0.0.0/app/templates/Index.html

@@ -13,14 +13,36 @@
 	<title></title>
 	{{BaseAppFaviconPngLinkTag}}
 	{{BaseAppFaviconTouchLinkTag}}
-	<link type="text/css" rel="stylesheet" href="{{BaseAppMainCssLink}}" />
+	<style>{{BaseAppBootCss}}</style>
-	<link type="text/css" rel="stylesheet" href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
+	<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
+	<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
 	<link rel="manifest" href="{{BaseAppManifestLink}}" />
 </head>
 
 <body class="thm-body">
-	<div id="rl-app" data-boot='{{RainloopBootData}}'></div>
+	<div id="rl-app" data-boot='{{RainloopBootData}}'>
+		<div id="rl-loading" class="thm-loading">
+			<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
+			<div class="e-spinner">
+				<div class="e-bounce bounce1"></div>
+				<div class="e-bounce bounce2"></div>
+				<div class="e-bounce bounce3"></div>
+			</div>
+		</div>
+		<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>
+		<div id="rl-content">
+			<div id="rl-popups"></div>
+			<div id="rl-center">
+				<div id="rl-top"></div>
+				<div id="rl-left"></div>
+				<div id="rl-right"></div>
+			</div>
+		</div>
+		<div id="rl-templates"></div>
+		<div id="rl-hidden"></div>
+	</div>
 	<div id="rl-check"></div>
+	<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
 	<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
 </body>
 

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -197,10 +197,6 @@
 	.thm-rgba-background-color(@message-background-color, @message-rgba-background-color);
 }
 
-#rl-app{
-	display: block;
-}
-
 // glass style
 html.glass {
 

tasks/config.js

@@ -57,6 +57,12 @@ config.paths.css = {
 			'vendors/flags/flags-fixed.css',
 			'vendors/lightgallery/dist/css/lightgallery.min.css',
 			'vendors/lightgallery/dist/css/lg-transitions.min.css',
+		]
+	},
+	boot: {
+		name: 'boot.css',
+		src: [
+			'dev/Styles/@Boot.css',
 			'dev/Styles/_progressjs.css'
 		]
 	}

tasks/css.js

@@ -16,6 +16,19 @@ const { del } = require('./common');
 
 const cssClean = () => del(config.paths.staticCSS + '/*.css');
 
+const cssBootBuild = () => {
+	const autoprefixer = require('gulp-autoprefixer'),
+		src = config.paths.css.boot.src;
+	return gulp
+		.src(src)
+		.pipe(expect.real({ errorOnFailure: true }, src))
+		.pipe(concat(config.paths.css.boot.name))
+		.pipe(autoprefixer())
+		.pipe(replace(/\.\.\/(img|images|fonts|svg)\//g, '$1/'))
+		.pipe(eol('\n', true))
+		.pipe(gulp.dest(config.paths.staticCSS));
+};
+
 const cssMainBuild = () => {
 	const autoprefixer = require('gulp-autoprefixer'),
 		less = require('gulp-less'),
@@ -41,6 +54,16 @@ const cssMainBuild = () => {
 		.pipe(livereload());
 };
 
+const cssBootMin = () => {
+	const cleanCss = require('gulp-clean-css');
+	return gulp
+		.src(config.paths.staticCSS + config.paths.css.boot.name)
+		.pipe(cleanCss())
+		.pipe(rename({ suffix: '.min' }))
+		.pipe(eol('\n', true))
+		.pipe(gulp.dest(config.paths.staticCSS));
+};
+
 const cssMainMin = () => {
 	const cleanCss = require('gulp-clean-css');
 	return gulp
@@ -51,8 +74,8 @@ const cssMainMin = () => {
 		.pipe(gulp.dest(config.paths.staticCSS));
 };
 
-const cssBuild = gulp.parallel(cssMainBuild);
+const cssBuild = gulp.parallel(cssBootBuild, cssMainBuild);
-const cssMin = gulp.parallel(cssMainMin);
+const cssMin = gulp.parallel(cssBootMin, cssMainMin);
 
 const cssLint = (done) => done();