Merge pull request #38 from mozilla/papercuts2

add loader icon to bottom panel tabs

ui/css/treeherder.css

@@ -641,6 +641,11 @@ fieldset[disabled] .btn-pink.active {
     background-color: LightGrey;
 }
 
+
 #help.dt, #help.dd { text-align: center;}
 #help.panel {padding:5px;}
 #help{padding-top:10px;}
+
+.waiter-small{ background: url("../img/waiter16.png") no-repeat center center; width: 16px; height: 16px; display: inline-block;}
+.waiter-medium{ background: url("../img/waiter32.png") no-repeat center center; width: 32px; height: 32px; display: inline-block;}
+.waiter-large{ background: url("../img/waiter64.png") no-repeat center center; width: 64px; height: 64px; display: inline-block;}

ui/plugins/controller.js

@@ -26,6 +26,9 @@ treeherder.controller('PluginCtrl',
                     "Build OS": $scope.job.build_os || undef
                 };
 
+
+                $scope.tab_loading = true;
+
                 $http.get(thServiceDomain + $scope.job.resource_uri).
                     success(function(data) {
                         $scope.logs = data.logs;
@@ -46,6 +49,7 @@ treeherder.controller('PluginCtrl',
                                 $scope.lvUrl = thUrl.getLogViewerUrl(artifact.id);
                             }
                         });
+                        $scope.tab_loading = false;
                     });
                 JobNote = thJobNote.get();
                 $scope.updateNotes();
@@ -116,5 +120,7 @@ treeherder.controller('PluginCtrl',
             }
         ];
 
+        $scope.tab_loading = false;
+
     }
 );

ui/plugins/pluginpanel.html

@@ -30,7 +30,10 @@
                 <div class="panel-body">
                     <tabset class="tabs-below">
                         <tab ng-repeat="tab in tabs"  active="tab.active" disabled="tab.disabled">
-                            <tab-heading>{{ tab.title }} <span class="badge">{{tab.num_items}}</span></tab-heading>
+                            <tab-heading>{{ tab.title }}
+                                <span ng-show="!tab_loading" class="badge">{{tab.num_items}}</span>
+                                <span class="waiter-small" ng-show="tab_loading"></span>
+                            </tab-heading>
                             <ng-include src="tab.content"></ng-include>
                         </tab>
                     </tabset>