make the CSS for the loading animation inline to avoid blank screen

packages/rocketchat-theme/assets/stylesheets/base.less

@@ -583,60 +583,6 @@ label.required:after {
 	content: ' *';
 }
 
-.loading {
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	display: flex;
-	align-items: center;
-	position: absolute;
-	justify-content: center;
-	text-align: center;
-	> div {
-		width: 10px;
-		height: 10px;
-		background-color: #ccc;
-		margin: 2px;
-		border-radius: 100%;
-		display: inline-block;
-		-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-		animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-	}
-	.bounce1 {
-		-webkit-animation-delay: -0.32s;
-		animation-delay: -0.32s;
-	}
-	.bounce2 {
-		-webkit-animation-delay: -0.16s;
-		animation-delay: -0.16s;
-	}
-}
-
-@-webkit-keyframes loading-bouncedelay {
-	0%,
-	80%,
-	100% {
-		-webkit-transform: scale(0)
-	}
-	40% {
-		-webkit-transform: scale(1.0)
-	}
-}
-
-@keyframes loading-bouncedelay {
-	0%,
-	80%,
-	100% {
-		-webkit-transform: scale(0);
-		transform: scale(0);
-	}
-	40% {
-		-webkit-transform: scale(1.0);
-		transform: scale(1.0);
-	}
-}
-
 .btn-loading {
 	pointer-events: none;
 	cursor: not-allowed;
@@ -2015,20 +1961,16 @@ label.required:after {
 	font-size: 1em;
 	left: 10px;
 	right: 10px;
-	box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,.16);
-
+	box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, .16);
 	.transition(transform 0.4s ease, visibility 0.3s ease, opacity 0.3s ease);
 	.transform(translateY(-10px));
-
 	opacity: 0;
 	visibility: hidden;
-
 	&.show {
 		opacity: 1;
 		visibility: visible;
 		.transform(translateY(0px));
 	}
-
 	> div {
 		line-height: 28px;
 		padding: 0 10px;

packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less

@@ -129,7 +129,6 @@ html {
 
 body {
 	color: @primary-font-color;
-	background-color: @primary-background-color;
 }
 
 textarea,

packages/rocketchat-ui-master/server/inject.js

@@ -1,14 +1,68 @@
 /* globals Inject */
 
 Inject.rawBody('page-loading', `
-	<div id="initial-page-loading" class="page-loading">
-		<div class="loading">
-			<div class="bounce1"></div>
-			<div class="bounce2"></div>
-			<div class="bounce3"></div>
-		</div>
-	</div>`
-);
+<style>
+.loading {
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	justify-content: center;
+	text-align: center;
+}
+.loading > div {
+	width: 10px;
+	height: 10px;
+	margin: 2px;
+	border-radius: 100%;
+	display: inline-block;
+	-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+}
+.loading .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+.loading .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+@-webkit-keyframes loading-bouncedelay {
+	0%, 80%, 100% { -webkit-transform: scale(0) }
+	40% { -webkit-transform: scale(1.0) }
+}
+@keyframes loading-bouncedelay {
+	0%, 80%, 100% { transform: scale(0); }
+	40% { transform: scale(1.0); }
+}
+</style>
+<div id="initial-page-loading" class="page-loading">
+	<div class="loading">
+		<div class="bounce1"></div>
+		<div class="bounce2"></div>
+		<div class="bounce3"></div>
+	</div>
+</div>`);
+
+
+RocketChat.settings.get('theme-color-primary-background-color', function(key, value) {
+	if (value) {
+		Inject.rawBody('theme-color-primary-background-color', `<style>body { background-color: ${value};}</style>`);
+	} else {
+		Inject.rawBody('theme-color-primary-background-color', '<style>body { background-color: #04436a;}</style>');
+	}
+});
+
+RocketChat.settings.get('theme-color-tertiary-font-color', function(key, value) {
+	if (value) {
+		Inject.rawBody('theme-color-tertiary-font-color', `<style>.loading > div { background-color: ${value};}</style>`);
+	} else {
+		Inject.rawBody('theme-color-tertiary-font-color', '<style>.loading > div { background-color: #cccccc;}</style>');
+	}
+});
 
 RocketChat.settings.get('Site_Url', function() {
 	Meteor.defer(function() {