use angular-loading-bar instead of spin.js for ajax indicator

pom.xml

@@ -438,11 +438,6 @@
 			<artifactId>mousetrap</artifactId>
 			<version>1.4.6</version>
 		</dependency>
-		<dependency>
-			<groupId>org.webjars</groupId>
-			<artifactId>spin-js</artifactId>
-			<version>1.3.3</version>
-		</dependency>
 		<dependency>
 			<groupId>org.webjars</groupId>
 			<artifactId>momentjs</artifactId>

src/main/webapp/WEB-INF/wro.xml

@@ -22,8 +22,6 @@
 
 		<js>webjar:device.min.js</js>
 
-		<js>webjar:spin.js</js>
-
 		<js>webjar:moment.min.js</js>
 		<js>webjar:langs.min.js</js>
 
@@ -32,12 +30,14 @@
 		<js>webjar:angular-route.min.js</js>
 		<js>webjar:angular-sanitize.min.js</js>
 		<js>webjar:angular-touch.min.js</js>
+		<js>webjar:angular-animate.min.js</js>
 
 		<js>webjar:angular-ui-router.min.js</js>
 		<js>webjar:ui-utils.min.js</js>
 		<js>webjar:ui-select2.js</js>
 		<js>webjar:ui-bootstrap-tpls.min.js</js>
 		<js>webjar:ng-infinite-scroll.min.js</js>
+		<js>/vendor/angular-loading-bar/loading-bar.0.3.0.min.js</js>
 
 		<js>webjar:ng-grid.min.js</js>
 		<css>webjar:ng-grid.min.css</css>
@@ -46,6 +46,8 @@
 
 		<css>/vendor/readabilicons/css/*.css</css>
 		
+		<css>/vendor/angular-loading-bar/loading-bar.min.css</css>
+		
 	</group>
 
 	<group name="app">

src/main/webapp/js/controllers.js

@@ -430,7 +430,6 @@ module.controller('TagDetailsCtrl', ['$scope', '$state', '$stateParams', 'FeedSe
 
 module.controller('ToolbarCtrl', [
 		'$scope',
-		'$http',
 		'$state',
 		'$stateParams',
 		'$route',
@@ -442,24 +441,15 @@ module.controller('ToolbarCtrl', [
 		'ServerService',
 		'FeedService',
 		'MobileService',
-		function($scope, $http, $state, $stateParams, $route, $location, SettingsService, EntryService, ProfileService, AnalyticsService,
+		function($scope, $state, $stateParams, $route, $location, SettingsService, EntryService, ProfileService, AnalyticsService,
 				ServerService, FeedService, MobileService) {
 
-			function totalActiveAjaxRequests() {
-				return ($http.pendingRequests.length + $.active);
-			}
-
 			$scope.keywords = $location.search().q;
 			$scope.session = ProfileService.get();
 			$scope.ServerService = ServerService.get();
 			$scope.settingsService = SettingsService;
 			$scope.MobileService = MobileService;
 
-			$scope.loading = true;
-			$scope.$watch(totalActiveAjaxRequests, function() {
-				$scope.loading = (totalActiveAjaxRequests() !== 0);
-			});
-
 			$scope.$watch('settingsService.settings.readingMode', function(newValue, oldValue) {
 				if (newValue && oldValue && newValue != oldValue) {
 					SettingsService.save();

src/main/webapp/js/directives.js

@@ -273,46 +273,6 @@ module.directive('category', [function() {
 	};
 }]);
 
-/**
- * Reusable spinner component
- */
-module.directive('spinner', function() {
-	return {
-		scope : {
-			shown : '='
-		},
-		restrict : 'A',
-		link : function($scope, element) {
-			element.addClass('spinner');
-			var opts = {
-				lines : 11, // The number of lines to draw
-				length : 5, // The length of each line
-				width : 3, // The line thickness
-				radius : 8, // The radius of the inner circle
-				corners : 1, // Corner roundness (0..1)
-				rotate : 0, // The rotation offset
-				color : '#000', // #rgb or #rrggbb
-				speed : 1.3, // Rounds per second
-				trail : 60, // Afterglow percentage
-				shadow : false, // Whether to render a shadow
-				hwaccel : true, // Whether to use hardware acceleration
-				zIndex : 2e9, // The z-index (defaults to 2000000000)
-				top : 'auto', // Top position relative to parent in px
-				left : 'auto' // Left position relative to parent in px
-			};
-			var spinner = new Spinner(opts);
-			$scope.$watch('shown', function(shown) {
-				if (shown) {
-					spinner.spin();
-					element.append(spinner.el);
-				} else {
-					spinner.stop();
-				}
-			});
-		}
-	};
-});
-
 module.directive('draggable', function() {
 	return {
 		restrict : 'A',

src/main/webapp/js/main.js

@@ -1,8 +1,12 @@
-var app = angular.module('commafeed', ['ngRoute', 'ngTouch', 'ui.utils', 'ui.bootstrap', 'ui.router', 'ui.select2', 'commafeed.directives',
-		'commafeed.controllers', 'commafeed.services', 'commafeed.filters', 'ngSanitize', 'infinite-scroll', 'ngGrid']);
+var app = angular.module('commafeed', ['ngRoute', 'ngTouch', 'ngAnimate', 'ui.utils', 'ui.bootstrap', 'ui.router', 'ui.select2',
+		'commafeed.directives', 'commafeed.controllers', 'commafeed.services', 'commafeed.filters', 'ngSanitize', 'infinite-scroll',
+		'ngGrid', 'chieffancypants.loadingBar']);
 
-app.config(['$routeProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$compileProvider',
-		function($routeProvider, $stateProvider, $urlRouterProvider, $httpProvider, $compileProvider) {
+app.config(['$routeProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$compileProvider', 'cfpLoadingBarProvider',
+		function($routeProvider, $stateProvider, $urlRouterProvider, $httpProvider, $compileProvider, cfpLoadingBarProvider) {
+	
+			cfpLoadingBarProvider.includeSpinner = false;
+			cfpLoadingBarProvider.latencyThreshold = 0;
 
 			$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
 			var interceptor = ['$rootScope', '$q', function(scope, $q) {

src/main/webapp/sass/app.scss

@@ -6,6 +6,7 @@
 @import "components/entry-list";
 @import "components/subscription-list";
 @import "components/help";
+@import "components/loading-bar";
 
 @import "mobile/mobile";
 

src/main/webapp/sass/components/_loading-bar.scss

@@ -0,0 +1,12 @@
+#loading-bar .bar {
+	background: #2c3e50;
+}
+
+#loading-bar .peg {
+	box-shadow: 0 0 10px #2c3e50, 0 0 5px #2c3e50;
+}
+
+#loading-bar-spinner .spinner-icon {
+	border-top-color: #2c3e50;
+	border-left-color: #2c3e50;
+}

src/main/webapp/templates/_toolbar.html

@@ -131,7 +131,6 @@
 
 			</div>
 		</div>
-		<div spinner shown="loading"></div>
 		<span ng-if="!MobileService.mobile" ng-bind-html="ServerService.announcement | trustHtml"></span>
 	</div>
 </div>

src/main/webapp/vendor/angular-loading-bar/loading-bar.0.3.0.min.js

@@ -0,0 +1,7 @@
+/*! 
+ * angular-loading-bar v0.3.0
+ * https://chieffancypants.github.io/angular-loading-bar
+ * Copyright (c) 2014 Wes Cruver
+ * License: MIT
+ */
+!function(){"use strict";angular.module("angular-loading-bar",["chieffancypants.loadingBar"]),angular.module("chieffancypants.loadingBar",[]).config(["$httpProvider",function(a){var b=["$q","$cacheFactory","$timeout","$rootScope","cfpLoadingBar",function(b,c,d,e,f){function g(){d.cancel(i),f.complete(),k=0,j=0}function h(b){var d,e=a.defaults;if("GET"!==b.method||b.cache===!1)return b.cached=!1,!1;d=b.cache===!0&&void 0===e.cache?c.get("$http"):void 0!==e.cache?e.cache:b.cache;var f=void 0!==d?void 0!==d.get(b.url):!1;return void 0!==b.cached&&f!==b.cached?b.cached:(b.cached=f,f)}var i,j=0,k=0,l=f.latencyThreshold;return{request:function(a){return a.ignoreLoadingBar||h(a)||(e.$broadcast("cfpLoadingBar:loading",{url:a.url}),0===j&&(i=d(function(){f.start()},l)),j++,f.set(k/j)),a},response:function(a){return h(a.config)||(k++,e.$broadcast("cfpLoadingBar:loaded",{url:a.config.url}),k>=j?g():f.set(k/j)),a},responseError:function(a){return h(a.config)||(k++,e.$broadcast("cfpLoadingBar:loaded",{url:a.config.url}),k>=j?g():f.set(k/j)),b.reject(a)}}}];a.interceptors.push(b)}]).provider("cfpLoadingBar",function(){this.includeSpinner=!0,this.includeBar=!0,this.latencyThreshold=100,this.parentSelector="body",this.$get=["$document","$timeout","$animate","$rootScope",function(a,b,c,d){function e(){b.cancel(k),q||(d.$broadcast("cfpLoadingBar:started"),q=!0,t&&c.enter(n,m),s&&c.enter(p,m),f(.02))}function f(a){if(q){var c=100*a+"%";o.css("width",c),r=a,b.cancel(j),j=b(function(){g()},250)}}function g(){if(!(h()>=1)){var a=0,b=h();a=b>=0&&.25>b?(3*Math.random()+3)/100:b>=.25&&.65>b?3*Math.random()/100:b>=.65&&.9>b?2*Math.random()/100:b>=.9&&.99>b?.005:0;var c=h()+a;f(c)}}function h(){return r}function i(){d.$broadcast("cfpLoadingBar:completed"),f(1),k=b(function(){c.leave(n,function(){r=0,q=!1}),c.leave(p)},500)}var j,k,l=this.parentSelector,m=a.find(l),n=angular.element('<div id="loading-bar"><div class="bar"><div class="peg"></div></div></div>'),o=n.find("div").eq(0),p=angular.element('<div id="loading-bar-spinner"><div class="spinner-icon"></div></div>'),q=!1,r=0,s=this.includeSpinner,t=this.includeBar;return{start:e,set:f,status:h,inc:g,complete:i,includeSpinner:this.includeSpinner,latencyThreshold:this.latencyThreshold,parentSelector:this.parentSelector}}]})}();

src/main/webapp/vendor/angular-loading-bar/loading-bar.min.css

@@ -0,0 +1,8 @@
+/*! 
+ * angular-loading-bar v0.3.0
+ * https://chieffancypants.github.io/angular-loading-bar
+ * Copyright (c) 2014 Wes Cruver
+ * License: MIT
+ */
+
+#loading-bar,#loading-bar-spinner{pointer-events:none;-webkit-pointer-events:none;-webkit-transition:350ms linear all;-moz-transition:350ms linear all;-o-transition:350ms linear all;transition:350ms linear all}#loading-bar.ng-enter,#loading-bar.ng-leave.ng-leave-active,#loading-bar-spinner.ng-enter,#loading-bar-spinner.ng-leave.ng-leave-active{opacity:0}#loading-bar.ng-enter.ng-enter-active,#loading-bar.ng-leave,#loading-bar-spinner.ng-enter.ng-enter-active,#loading-bar-spinner.ng-leave{opacity:1}#loading-bar .bar{-webkit-transition:width 350ms;-moz-transition:width 350ms;-o-transition:width 350ms;transition:width 350ms;background:#29d;position:fixed;z-index:2000;top:0;left:0;width:100%;height:2px}#loading-bar .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-moz-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);-o-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#loading-bar-spinner{display:block;position:fixed;z-index:100;top:10px;left:10px}#loading-bar-spinner .spinner-icon{width:14px;height:14px;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:10px;-webkit-animation:loading-bar-spinner 400ms linear infinite;-moz-animation:loading-bar-spinner 400ms linear infinite;-ms-animation:loading-bar-spinner 400ms linear infinite;-o-animation:loading-bar-spinner 400ms linear infinite;animation:loading-bar-spinner 400ms linear infinite}@-webkit-keyframes loading-bar-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes loading-bar-spinner{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes loading-bar-spinner{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes loading-bar-spinner{0%{-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading-bar-spinner{0%{transform:rotate(0deg);transform:rotate(0deg)}100%{transform:rotate(360deg);transform:rotate(360deg)}}