Fix ISSUE# 256 Add loading icon for slow querying

src/main/resources/static/src/consumer.js

@@ -58,6 +58,9 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http','Notifica
         $scope.filterList($scope.paginationConf.currentPage)
     };
     $scope.refreshConsumerData = function () {
+        //Show loader
+        $('#loaderConsumer').removeClass("hide-myloader");
+
         $http({
             method: "GET",
             url: "consumer/groupList.query"
@@ -67,6 +70,9 @@ module.controller('consumerController', ['$scope', 'ngDialog', '$http','Notifica
                 console.log($scope.allConsumerGrouopList);
                 console.log(JSON.stringify(resp));
                 $scope.showConsumerGroupList($scope.paginationConf.currentPage,$scope.allConsumerGrouopList.length);
+
+                //Hide loader
+                $('#loaderConsumer').addClass("hide-myloader");
             }else {
                 Notification.error({message: resp.errMsg, delay: 2000});
             }

src/main/resources/static/style/preLoading/main.css

@@ -418,3 +418,25 @@ h1 {
 	Anyway I don't really mind it. This is a great way to learn so you actually doing the right thing:)
 	Follow me @ihatetomatoes
 */
+
+
+.myloader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+ }
+
+
+.hide-myloader {
+    display:none;
+}
+
+.centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/main/resources/static/view/pages/consumer.html

@@ -16,6 +16,8 @@
   -->
 <div class="container-fluid" id="deployHistoryList">
     <div class="modal-body">
+        <div class="myloader centered" id="loaderConsumer">
+        </div>
         <div class="row">
             <form class="form-inline pull-left col-sm-10">
                 <div class="form-group form-group-sm">
@@ -57,7 +59,7 @@
                         <th class="text-center">{{ 'OPERATION' | translate}}</th>
                     </tr>
                     <tr ng-repeat="consumerGroup in consumerGroupShowList">
-                        <td class="text-center">{{consumerGroup.group}}</td>
+                        <td class="text-left">{{consumerGroup.group}}</td>
                         <td class="text-center">{{consumerGroup.count}}</td>
                         <td class="text-center">{{consumerGroup.version}}</td>
                         <td class="text-center">{{consumerGroup.consumeType}}</td>