Merge pull request #2128 from hypothesis/930-loading-icon

Show spinner in search bar during requests

h/static/scripts/directive/simple-search.coffee

-module.exports = ['$parse', ($parse) ->
-  uuid = 0
+module.exports = ['$http', '$parse', ($http, $parse) ->
   link: (scope, elem, attr, ctrl) ->
-    scope.viewId = uuid++
-
     scope.reset = (event) ->
       event.preventDefault()
       scope.query = ''
@@ -12,6 +9,9 @@ module.exports = ['$parse', ($parse) ->
       event.preventDefault()
       scope.query = scope.searchtext
 
+    scope.$watch (-> $http.pendingRequests.length), (pending) ->
+      scope.loading = (pending > 0)
+
     scope.$watch 'query', (query) ->
       return if query is undefined
       scope.searchtext = query
@@ -27,8 +27,15 @@ module.exports = ['$parse', ($parse) ->
     onClear: '&'
   template: '''
             <form class="simple-search-form" ng-class="!searchtext && 'simple-search-inactive'" name="searchBox" ng-submit="search($event)">
-              <input id="simple-search-{{viewId}}" class="simple-search-input" type="text" ng-model="searchtext" name="searchText" placeholder="Search…" />
-              <label for="simple-search-{{viewId}}" class="simple-search-icon h-icon-search"></label>
+              <input class="simple-search-input" type="text" ng-model="searchtext" name="searchText"
+                     placeholder="{{loading && 'Loading' || 'Search'}}…"
+                     ng-disabled="loading" />
+              <span class="simple-search-icon" ng-hide="loading">
+                <i class="h-icon-search"></i>
+              </span>
+              <span class="simple-search-icon" ng-show="loading">
+                <i class="spinner"></i>
+              </span>
             </form>
             '''
 ]

h/static/scripts/directive/test/simple-search-test.coffee

@@ -3,10 +3,11 @@
 assert = chai.assert
 
 
-describe 'h:directives.simple-search', ->
+describe 'simple-search', ->
   $compile = null
   $element = null
   $scope = null
+  fakeHttp = null
   fakeWindow = null
   isolate = null
 
@@ -16,6 +17,11 @@ describe 'h:directives.simple-search', ->
 
   beforeEach module('h')
 
+  beforeEach module ($provide) ->
+    fakeHttp = {pendingRequests: []}
+    $provide.service('$http', -> fakeHttp)
+    return
+
   beforeEach inject (_$compile_, _$rootScope_) ->
     $compile = _$compile_
     $scope = _$rootScope_.$new()
@@ -64,3 +70,11 @@ describe 'h:directives.simple-search', ->
 
     $form = $element.find('.simple-search-form')
     assert.notInclude($form.prop('className'), 'simple-search-inactive')
+
+  it 'sets the `loading` scope key when http requests are in progress', ->
+    fakeHttp.pendingRequests = []
+    isolate.$digest()
+    assert.isFalse(isolate.loading)
+    fakeHttp.pendingRequests = ['bogus']
+    isolate.$digest()
+    assert.isTrue(isolate.loading)

h/static/styles/simple-search.scss

@@ -13,32 +13,33 @@
 }
 
 .simple-search-form * {
-  box-sizing: border-box;
+  line-height: inherit;
 }
 
-@include icons {
-  &.simple-search-icon {
-    line-height: inherit;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
+.simple-search-icon {
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 :not(:focus) ~ .simple-search-icon {
   color: $gray-lighter;
 }
 
-.simple-search-input {
+input.simple-search-input {
   float: left;
   outline: none;
   color: $text-color;
-  line-height: inherit;
   width: 100%;
-  border: none !important; // Override base input styles.
+  border: none;
   padding: 0;
 
   .simple-search-inactive &:not(:focus) {
-    border-color: #f3f3f3 !important;
+    border-color: #f3f3f3;
+  }
+
+  &:disabled {
+    background: none;
+    color: $gray-light;
   }
 }