From e356d7f9a28417e8f66352187567cdb85575c3bc Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 6 Mar 2018 11:42:17 -0300
Subject: [PATCH 1/2] fix initial loading feedback

---
 .../rocketchat-livechat/.app/client/views/loading.html   | 8 ++++----
 .../rocketchat-theme/client/imports/general/base.css     | 2 ++
 packages/rocketchat-ui-master/server/inject.js           | 9 ++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/rocketchat-livechat/.app/client/views/loading.html b/packages/rocketchat-livechat/.app/client/views/loading.html
index e13a3f77ba1c..77310699f18a 100644
--- a/packages/rocketchat-livechat/.app/client/views/loading.html
+++ b/packages/rocketchat-livechat/.app/client/views/loading.html
@@ -1,8 +1,8 @@
 <template name="loading">
 	<div class="loading-animation">
 		{{_ "Connecting to an Agent"}}
-		<div class="bounce1"></div>
-		<div class="bounce2"></div>
-		<div class="bounce3"></div>
+		<div class="bounce bounce1"></div>
+		<div class="bounce bounce2"></div>
+		<div class="bounce bounce3"></div>
 	</div>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css
index 28a4e7342769..04202e9243f8 100644
--- a/packages/rocketchat-theme/client/imports/general/base.css
+++ b/packages/rocketchat-theme/client/imports/general/base.css
@@ -30,6 +30,8 @@ body {
 	font-size: var(--text-small-size);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+
+	background-color: var(--rc-color-primary)
 }
 
 :focus {
diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js
index 4f70c56de2da..7f45db12a178 100644
--- a/packages/rocketchat-ui-master/server/inject.js
+++ b/packages/rocketchat-ui-master/server/inject.js
@@ -36,9 +36,9 @@ Inject.rawBody('icons', Assets.getText('public/icons.svg'));
 Inject.rawBody('page-loading-div', `
 <div id="initial-page-loading" class="page-loading">
 	<div class="loading-animation">
-		<div class="bounce1"></div>
-		<div class="bounce2"></div>
-		<div class="bounce3"></div>
+		<div class="bounce bounce1"></div>
+		<div class="bounce bounce2"></div>
+		<div class="bounce bounce3"></div>
 	</div>
 </div>`);
 
@@ -71,8 +71,7 @@ RocketChat.settings.get('Assets_SvgFavicon_Enable', (key, value) => {
 });
 
 RocketChat.settings.get('theme-color-sidebar-background', (key, value) => {
-	Inject.rawHead(key, `<style>body { background-color: ${ value };}</style>` +
-						`<meta name="msapplication-TileColor" content="${ value }" />` +
+	Inject.rawHead(key, `<meta name="msapplication-TileColor" content="${ value }" />` +
 						`<meta name="theme-color" content="${ value }" />`);
 });
 

From 2fd19cbf72fe22e2a105bca7afa5418cd92378d6 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Tue, 6 Mar 2018 14:47:33 -0300
Subject: [PATCH 2/2] move loading animation css to css bundle

---
 .../client/imports/general/base.css           | 49 +++++++++++++++++++
 packages/rocketchat-ui-master/package.js      |  1 -
 .../rocketchat-ui-master/public/loading.css   | 48 ------------------
 .../rocketchat-ui-master/server/inject.js     |  2 -
 4 files changed, 49 insertions(+), 51 deletions(-)
 delete mode 100644 packages/rocketchat-ui-master/public/loading.css

diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css
index 04202e9243f8..f4a7f3adcdab 100644
--- a/packages/rocketchat-theme/client/imports/general/base.css
+++ b/packages/rocketchat-theme/client/imports/general/base.css
@@ -207,3 +207,52 @@ button {
 .hidden {
 	display: none;
 }
+
+.loading-animation {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+	display: flex;
+
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+}
+
+.loading-animation > .bounce {
+	display: inline-block;
+
+	width: 10px;
+	height: 10px;
+	margin: 2px;
+
+	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
+
+	border-radius: 100%;
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
+.loading-animation .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+
+.loading-animation .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		transform: scale(0);
+	}
+
+	40% {
+		transform: scale(1);
+	}
+}
diff --git a/packages/rocketchat-ui-master/package.js b/packages/rocketchat-ui-master/package.js
index dedf7eea4e99..e2b51652edf8 100644
--- a/packages/rocketchat-ui-master/package.js
+++ b/packages/rocketchat-ui-master/package.js
@@ -28,5 +28,4 @@ Package.onUse(function(api) {
 
 	api.addFiles('server/inject.js', 'server');
 	api.addAssets('public/icons.svg', 'server');
-	api.addAssets('public/loading.css', 'server');
 });
diff --git a/packages/rocketchat-ui-master/public/loading.css b/packages/rocketchat-ui-master/public/loading.css
deleted file mode 100644
index 42984694f28c..000000000000
--- a/packages/rocketchat-ui-master/public/loading.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.loading-animation {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-
-	display: flex;
-
-	text-align: center;
-	align-items: center;
-	justify-content: center;
-}
-
-.loading-animation > .bounce {
-	display: inline-block;
-
-	width: 10px;
-	height: 10px;
-	margin: 2px;
-
-	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-
-	border-radius: 100%;
-	background-color: rgba(255, 255, 255, 0.6);
-}
-
-.loading-animation .bounce1 {
-	-webkit-animation-delay: -0.32s;
-	animation-delay: -0.32s;
-}
-
-.loading-animation .bounce2 {
-	-webkit-animation-delay: -0.16s;
-	animation-delay: -0.16s;
-}
-
-@keyframes loading-bouncedelay {
-	0%,
-	80%,
-	100% {
-		transform: scale(0);
-	}
-
-	40% {
-		transform: scale(1);
-	}
-}
diff --git a/packages/rocketchat-ui-master/server/inject.js b/packages/rocketchat-ui-master/server/inject.js
index 7f45db12a178..d83897f88900 100644
--- a/packages/rocketchat-ui-master/server/inject.js
+++ b/packages/rocketchat-ui-master/server/inject.js
@@ -29,8 +29,6 @@ RocketChat.models.Settings.find({_id:/theme-color-rc/i}, {fields: { value: 1}}).
 
 Inject.rawHead('dynamic', `<script>(${ require('./dynamic-css.js').default.toString().replace(/\/\/.*?\n/g, '') })()</script>`);
 
-Inject.rawHead('page-loading', `<style>${ Assets.getText('public/loading.css') }</style>`);
-
 Inject.rawBody('icons', Assets.getText('public/icons.svg'));
 
 Inject.rawBody('page-loading-div', `