Merge pull request #551 from taigaio/issue/2803/search-result-loading

add loader in the search result page

app/coffee/app.coffee

@@ -98,7 +98,8 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEven
         {
             templateUrl: "search/search.html",
             reloadOnSearch: false,
-            section: "search"
+            section: "search",
+            loader: true
         }
     )
 

app/coffee/modules/common/loading.coffee

@@ -36,3 +36,17 @@ class TgLoadingService extends taiga.Service
             target.removeClass('loading')
 
 module.service("$tgLoading", TgLoadingService)
+
+LoadingDirective = ($loading) ->
+    link = ($scope, $el, attr) ->
+        $scope.$watch attr.tgLoading, (showLoading) =>
+            if showLoading
+                $loading.start($el)
+             else
+                 $loading.finish($el)
+
+    return {
+        link:link
+    }
+
+module.directive("tgLoading", ["$tgLoading", LoadingDirective])

app/coffee/modules/search.coffee

@@ -69,7 +69,10 @@ class SearchController extends mixOf(taiga.Controller, taiga.PageMixin)
 
         @scope.$watch "searchTerm", (term) =>
             if term
-                loadSearchData(term)
+                @scope.loading = true
+
+                @.loadSearchData(term).then () =>
+                    @scope.loading = false
 
     loadFilters: ->
         defered = @q.defer()

app/partials/includes/modules/search-in.jade

@@ -2,4 +2,5 @@ section.search-in
     header
         fieldset
             input(type="text", placeholder="{{'SEARCH.PLACEHOLDER_SEARCH' | translate}}", ng-model="searchTerm")
-            a.icon.icon-search(href="", title="{{'SEARCH.TITLE_ACTION_SEARCH' | translate}}")
+            .icon-search-wrapper(tg-loading="loading")
+                a.icon.icon-search(href="", title="{{'SEARCH.TITLE_ACTION_SEARCH' | translate}}")

app/styles/modules/search/search-in.scss

@@ -6,10 +6,15 @@
             color: $gray-light;
         }
     }
-    .icon-search {
+    .icon-search-wrapper {
-        color: $gray-light;
         position: absolute;
         right: .7rem;
         top: .7rem;
     }
+    .icon-search {
+        color: $gray-light;
+    }
+    .loading-spinner {
+        margin-top: .1rem;
+    }
 }