Implement conversation CSS loader when loading contact conversation (not on refresh)

css/style.css

@@ -213,3 +213,63 @@
 label {
 	font-weight: bold;
 }
+
+.loader,
+.loader:before,
+.loader:after {
+	background: #646464;
+	-webkit-animation: load1 1s infinite ease-in-out;
+	animation: load1 1s infinite ease-in-out;
+	width: 1em;
+	height: 4em;
+}
+.loader:before,
+.loader:after {
+	position: absolute;
+	top: 0;
+	content: '';
+}
+.loader:before {
+	left: -1.5em;
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+.loader {
+	color: #646464;
+	text-indent: -9999em;
+	margin: 88px auto;
+	position: relative;
+	font-size: 11px;
+	-webkit-transform: translateZ(0);
+	-ms-transform: translateZ(0);
+	transform: translateZ(0);
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+.loader:after {
+	left: 1.5em;
+}
+@-webkit-keyframes load1 {
+	0%,
+	80%,
+	100% {
+		box-shadow: 0 0;
+		height: 4em;
+	}
+	40% {
+		box-shadow: 0 -2em;
+		height: 5em;
+	}
+}
+@keyframes load1 {
+	0%,
+	80%,
+	100% {
+		box-shadow: 0 0;
+		height: 4em;
+	}
+	40% {
+		box-shadow: 0 -2em;
+		height: 5em;
+	}
+}

js/public/app.js

@@ -85,6 +85,7 @@ app.filter('firstCharacter', function() {
 
 app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile',
 	function ($scope, $interval, $timeout, $compile) {
+		$scope.isLoading = true;
 		$scope.buttons = [
 			{text: "Send"}
 		];
@@ -139,12 +140,16 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 				changeSelectedConversation($("a[mailbox-navigation='" + contact.nav + "']"));
 			}
 		};
+
 		$scope.fetchConversation = function (contact) {
 			// If contact is not null, we will fetch a conversation for a new contact
 			if (contact != null) {
 				$scope.selectedContact = contact;
+				$scope.isLoading = true;
 			}
+
 			$scope.messages = [];
+
 			$.getJSON(OC.generateUrl('/apps/ocsms/get/conversation'), {'phoneNumber': $scope.selectedContact.nav},
 				function(jsondata, status) {
 					var phoneNumberLabel = $scope.selectedContact.nav;
@@ -157,7 +162,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 					// Reinit messages before showing conversation
 					$scope.formatConversation(jsondata);
 
-					$scope.$apply(function () {
+					$scope.$apply(function() {
 						if (typeof jsondata['contactName'] == 'undefined' || jsondata['contactName'] == '') {
 							$scope.selectedContact.label = phoneNumberLabel;
 							$scope.selectedContact.opt_numbers = "";
@@ -168,6 +173,7 @@ app.controller('OcSmsController', ['$scope', '$interval', '$timeout', '$compile'
 						}
 
 						$scope.totalMessageCount = jsondata['msgCount'] !== undefined ? jsondata['msgCount'] : 0;
+						$scope.isLoading = false;
 					});
 
 					$('#app-content').scrollTop(1E10);

templates/main.php

@@ -56,7 +56,9 @@ use \OCA\OcSms\Lib\CountryCodes;
 	</div>
 
 	<div id="app-content">
-		<div id="app-content-header" ng-show="selectedContact.label !== undefined && selectedContact.label !== ''"
+		<div id="app-content-loader" class="loader" ng-show="isLoading">
+		</div>
+		<div id="app-content-header" ng-show="!isLoading && selectedContact.label !== undefined && selectedContact.label !== ''"
 			 ng-style="{'background-color': (selectedContact.label | peerColor)}">
 			<div id="ocsms-contact-avatar">
 				<img class="ocsms-plavatar-big" ng-src="{{ selectedContact.avatar }}"
@@ -72,7 +74,7 @@ use \OCA\OcSms\Lib\CountryCodes;
 			</div>
 			
 		</div>
-		<div id="app-content-wrapper">
+		<div id="app-content-wrapper" ng-show="!isLoading">
 			<div ng-show="messages.length == 0" id="ocsms-empty-conversation">Please choose a conversation on the left menu</div>
 			<div ng-repeat="message in messages | orderBy:'date'">
 				<div class="msg-{{ message.type }}">