Merge pull request #269 from colkito/bug/search-loading

Bug/search loading

public/src/css/common.css

@@ -138,6 +138,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: 'Ubuntu', sans-serif;
 }
 
+#search.loading {
+  background-image: url('/img/loading.gif');
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  padding-left: 25px;
+}
+
 #search::-webkit-input-placeholder {
   color: #BCDF7E;
   font-family: 'Ubuntu', sans-serif;

public/src/js/controllers/search.js

@@ -3,6 +3,7 @@
 angular.module('insight.search').controller('SearchController',
   function($scope, $routeParams, $location, $timeout, Global, Block, Transaction, Address, BlockByHeight) {
   $scope.global = Global;
+  $scope.loading = false;
 
   var _badQuery = function() {
     $scope.badQuery = true;
@@ -12,39 +13,46 @@ angular.module('insight.search').controller('SearchController',
     }, 2000);
   };
 
+  var _resetSearch = function() {
+    $scope.q = '';
+    $scope.loading = false;
+  };
+
   $scope.search = function() {
     var q = $scope.q;
     $scope.badQuery = false;
+    $scope.loading = true;
 
     Block.get({
       blockHash: q
     }, function() {
-      $scope.q = '';
+      _resetSearch();
       $location.path('block/' + q);
-    }, function () { //block not found, search on TX
+    }, function() { //block not found, search on TX
       Transaction.get({
         txId: q
       }, function() {
-        $scope.q = '';
+        _resetSearch();
         $location.path('tx/' + q);
-      }, function () { //tx not found, search on Address
+      }, function() { //tx not found, search on Address
         Address.get({
           addrStr: q
         }, function() {
-          $scope.q = '';
+          _resetSearch();
           $location.path('address/' + q);
-        }, function () { // block by height not found
+        }, function() { // block by height not found
           if (isFinite(q)) { // ensure that q is a finite number. A logical height value.
             BlockByHeight.get({
               blockHeight: q
             }, function(hash) {
-              $scope.q = '';
+              _resetSearch();
               $location.path('/block/' + hash.blockHash);
             }, function() { //not found, fail :(
               _badQuery();
             });
           }
           else {
+            $scope.loading = false;
             _badQuery();
           }
         });

public/views/includes/header.html

@@ -17,7 +17,7 @@
       </ul>
       <form data-ng-controller="SearchController" class="navbar-form navbar-left" role="search" data-ng-submit="search()">
         <div class="form-group" data-ng-class="{'has-error': badQuery}">
-          <input id="search" type="text" class="form-control" data-ng-model="q" placeholder="Search for block, transaction or address">
+          <input id="search" type="text" class="form-control" data-ng-model="q" data-ng-class="{'loading': loading}"  placeholder="Search for block, transaction or address">
         </div>
         <div class="no_matching text-danger" data-ng-show="badQuery">No matching records found!</div>
       </form>