Merge pull request #5229 from RocketChat/rename-loading-animation

rename default loading animation

packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less

@@ -73,7 +73,7 @@
 			}
 		}
 		.setting-block {
-			.loading {
+			.loading-animation {
 				top: 30px;
 			}
 			&:hover {

packages/rocketchat-livechat/app/client/stylesheets/loading.less

 @import "_variables.less";
 
-.loading {
+.loading-animation {
 	color: @secondary-font-color;
 	font-size: 1.3rem;
-    margin-left: 32px;
-    margin-top: 12px;
-    margin-bottom: 5px;
+	margin-left: 32px;
+	margin-top: 12px;
+	margin-bottom: 5px;
 }
 
-.loading > div {
-  width: 3px;
-  height: 3px;
-  background-color: @secondary-font-color;
-
-  border-radius: 100%;
-  display: inline-block;
-  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+.loading-animation > div {
+	width: 3px;
+	height: 3px;
+	border-radius: 100%;
+	display: inline-block;
+	background-color: @secondary-font-color;
+	-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-animation .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
 }
 
-.loading .bounce2 {
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
+.loading-animation .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
 }
 
-@-webkit-keyframes sk-bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0) }
-  40% { -webkit-transform: scale(1.0) }
+@-webkit-keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		-webkit-transform: scale(0)
+	}
+	40% {
+		-webkit-transform: scale(1.0)
+	}
 }
 
-@keyframes sk-bouncedelay {
-  0%, 80%, 100% { 
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  } 40% { 
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
-  }
-}
\ No newline at end of file
+@keyframes loading-bouncedelay {
+	0%,
+	80%,
+	100% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+	40% {
+		-webkit-transform: scale(1.0);
+		transform: scale(1.0);
+	}
+}

packages/rocketchat-livechat/app/client/views/loading.html

 <template name="loading">
-	<div class="loading">
+	<div class="loading-animation">
 		{{_ "Connecting to an Agent"}}
 		<div class="bounce1"></div>
 		<div class="bounce2"></div>

packages/rocketchat-mentions-flextab/client/views/mentionsFlexTab.coffee

@@ -8,9 +8,6 @@ Template.mentionsFlexTab.helpers
 	message: ->
 		return _.extend(this, { customClass: 'mentions' })
 
-	notReadySubscription: ->
-		return 'notready' unless Template.instance().subscriptionsReady()
-
 	hasMore: ->
 		return Template.instance().hasMore.get()
 

packages/rocketchat-mentions-flextab/client/views/stylesheets/mentionsFlexTab.less

 .mentioned-messages-list {
-	&.notready {
-		background-image: url(images/logo/loading.gif);
-		background-repeat: no-repeat;
-		background-position: 50% 50%;
-		height: 100px;
-
-		.message {
-			display: none;
-		}
-	}
-
-	li.empty {
-		text-align: center;
-		margin-top: 60px;
-	}
-
 	.message-cog-container {
 		.message-action {
 			display: none !important;
@@ -23,11 +7,4 @@
 			}
 		}
 	}
-
-	.load-more {
-		text-transform: lowercase;
-		text-align: center;
-		line-height: 40px;
-		font-style: italic;
-	}
 }

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

@@ -2194,21 +2194,6 @@ label.required:after {
 	}
 }
 
-.message-popup-results {
-	&.notready {
-		.message-popup-items {
-			position: relative;
-			height: 100px;
-			.loading {
-				display: flex;
-			}
-		}
-		.popup-item {
-			display: none;
-		}
-	}
-}
-
 .message-popup-position {
 	position: relative;
 }

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

@@ -887,6 +887,6 @@ label.required:after {
 	color: @error-contrast;
 }
 
-.loading.dark > div {
+.loading-animation.dark > div {
 	background-color: @transparent-darkest;
 }

packages/rocketchat-ui-master/master/loading.html

 <template name="loading">
-	<div class="loading {{#if dark}}dark{{/if}}">
+	<div class="loading-animation {{#if dark}}dark{{/if}}">
 		<div class="bounce1"></div>
 		<div class="bounce2"></div>
 		<div class="bounce3"></div>

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

@@ -2,7 +2,7 @@
 
 Inject.rawBody('page-loading', `
 <style>
-.loading {
+.loading-animation {
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -13,35 +13,39 @@ Inject.rawBody('page-loading', `
 	justify-content: center;
 	text-align: center;
 }
-.loading > div {
+.loading-animation > div {
 	width: 10px;
 	height: 10px;
 	margin: 2px;
 	border-radius: 100%;
 	display: inline-block;
+	background-color: rgba(255,255,255,0.8);
 	-webkit-animation: loading-bouncedelay 1.4s infinite ease-in-out both;
 	animation: loading-bouncedelay 1.4s infinite ease-in-out both;
-	background-color: rgba(255,255,255,0.8);
 }
-.loading .bounce1 {
+.loading-animation .bounce1 {
 	-webkit-animation-delay: -0.32s;
 	animation-delay: -0.32s;
 }
-.loading .bounce2 {
+.loading-animation .bounce2 {
 	-webkit-animation-delay: -0.16s;
 	animation-delay: -0.16s;
 }
 @-webkit-keyframes loading-bouncedelay {
-	0%, 80%, 100% { -webkit-transform: scale(0) }
+	0%,
+	80%,
+	100% { -webkit-transform: scale(0) }
 	40% { -webkit-transform: scale(1.0) }
 }
 @keyframes loading-bouncedelay {
-	0%, 80%, 100% { transform: scale(0); }
+	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="loading-animation">
 		<div class="bounce1"></div>
 		<div class="bounce2"></div>
 		<div class="bounce3"></div>