Display the loading spinner gif for all angular ajax requests

Remove the ajax-loader.gif which appeared only in unused styles.

app/app.js

@@ -2,9 +2,9 @@
 
 /* Declare app level module */
 angular.module('JamStash', ['ngCookies', 'ngRoute', 'ngSanitize', 'ui.keypress', 'angular-underscore/utils',
-    'jamstash.subsonic.controller', 'jamstash.archive.controller', 'jamstash.player.controller', 'jamstash.queue.controller', 'jamstash.settings.controller', 'jamstash.persistence'])
+    'jamstash.subsonic.controller', 'jamstash.archive.controller', 'jamstash.player.controller', 'jamstash.queue.controller', 'jamstash.settings.controller', 'jamstash.persistence', 'jamstash.loading'])
 
-.config(['$routeProvider',function($routeProvider) {
+.config(['$routeProvider',function ($routeProvider) {
     $routeProvider
         .when('/index', { redirectTo: '/library' })
         .when('/settings', { templateUrl: 'settings/settings.html', controller: 'SettingsController' })
@@ -19,8 +19,13 @@ angular.module('JamStash', ['ngCookies', 'ngRoute', 'ngSanitize', 'ui.keypress',
         .otherwise({ redirectTo: '/index' });
 }])
 
-.config(['$httpProvider',function($httpProvider) {
-    $httpProvider.interceptors.push(['$rootScope', '$location', '$q', 'globals', function ($rootScope, $location, $q, globals) {
+.config(['$httpProvider', function httpConfig ($httpProvider) {
+    $httpProvider.interceptors.push(authenticationInterceptor);
+    $httpProvider.interceptors.push(loadingInterceptor);
+}]);
+
+authenticationInterceptor.$inject = ['$rootScope', '$location', '$q', 'globals'];
+function authenticationInterceptor($rootScope, $location, $q, globals) {
     return {
         'request': function (request) {
             // if we're not logged-in to the AngularJS app, redirect to login page
@@ -47,5 +52,22 @@ angular.module('JamStash', ['ngCookies', 'ngRoute', 'ngSanitize', 'ui.keypress',
             return $q.reject(rejection);
         }
     };
-    }]);
-}]);
+}
+
+loadingInterceptor.$inject = ['Loading'];
+function loadingInterceptor(Loading) {
+    return {
+        request: function (request) {
+            Loading.isLoading = true;
+            return request;
+        },
+        response: function (response) {
+            Loading.isLoading = false;
+            return response;
+        },
+        responseError: function (error) {
+            Loading.isLoading = false;
+            return error;
+        }
+    };
+}

app/common/loading-service.js

@@ -0,0 +1,10 @@
+/**
+* jamstash.loading Module
+*
+* Keeps the loading state across the app in order to display the spinner gif
+*/
+angular.module('jamstash.loading', [])
+
+.value('Loading', {
+    isLoading: false
+});

app/common/main-controller.js

@@ -1,6 +1,6 @@
 angular.module('JamStash')
-.controller('AppController', ['$scope', '$rootScope', '$document', '$window', '$location', '$cookieStore', '$http', 'utils', 'globals', 'model', 'notifications', 'player', 'persistence', 'Page', 'subsonic',
-    function ($scope, $rootScope, $document, $window, $location, $cookieStore, $http, utils, globals, model, notifications, player, persistence, Page, subsonic) {
+.controller('AppController', ['$scope', '$rootScope', '$document', '$window', '$location', '$cookieStore', '$http', 'utils', 'globals', 'model', 'notifications', 'player', 'persistence', 'Page', 'subsonic', 'Loading',
+    function ($scope, $rootScope, $document, $window, $location, $cookieStore, $http, utils, globals, model, notifications, player, persistence, Page, subsonic, Loading) {
     'use strict';
 
     $rootScope.settings = globals.settings;
@@ -27,6 +27,17 @@ angular.module('JamStash')
         $location.path(path);
     };
 
+    $scope.loading = Loading;
+    // TODO: Hyz: remove when there are no longer jQuery ajax calls
+    $.ajaxSetup({
+        'beforeSend': function () {
+            $("#loading").removeClass('ng-hide');
+        },
+        'complete': function () {
+            $("#loading").addClass('ng-hide');
+        }
+    });
+
     // Reads cookies and sets globals.settings values
     $scope.loadSettings = function () {
         // Temporary Code to Convert Cookies added 2/2/2014
@@ -58,15 +69,6 @@ angular.module('JamStash')
         notifications.updateMessage(setting + ' : ' + globals.settings[id], true);
     };
 
-    $.ajaxSetup({
-        'beforeSend': function () {
-            $("#loading").show();
-        },
-        'complete': function () {
-            $("#loading").hide();
-        }
-    });
-
     var submenu_active = false;
     $('div.submenu').mouseenter(function () {
         submenu_active = true;

app/index.html

@@ -29,7 +29,7 @@
             <div id="messages">
                 <span ng-attr-id="{{ 'msg_' + $index }}" class="message" ng-repeat="item in Messages track by $index" ng-bind-html="item"></span>
             </div>
-            <div id="loading"></div>
+            <div id="loading" ng-show="loading.isLoading"></div>
             <a id="jslogo" title="Jamstash" class="showQueue" href=""></a>
             <a id="sslogo" target="_blank" ng-show="settings.Server" ng-href="{{settings.Server}}" title="{{settings.Server}}"></a>
             <div id="globalactions">
@@ -106,6 +106,7 @@
     <script src="common/model-service.js"></script>
     <script src="common/utils-service.js"></script>
     <script src="common/page-service.js"></script>
+    <script src="common/loading-service.js"></script>
     <script src="common/notification-service.js"></script>
     <script src="common/persistence-service.js"></script>
     <script src="common/main-controller.js"></script>

app/styles/Style.css

@@ -349,16 +349,8 @@ span.apiversion
 .leftsubsection {
     border-top: 1px solid #DDDDDD;
 }
-.loading
-{
-    display: none;
-    height: 100%;
-    width: 100%;
-    background: url('../images/ajax-loader.gif') no-repeat center center #f4f4f4;
-}
 #loading
 {
-    display: none;
     width: 64px;
     height: 64px;
     position: fixed;
@@ -374,15 +366,6 @@ span.apiversion
     -ms-border-radius: 8px;
     border-radius: 8px;
 }
-#toploading
-{
-    display: none;
-    height: 35px;
-    width: 40px;
-    margin: 0 0 0 2px;
-    background: url('../images/ajax-loader.gif') no-repeat center center;
-    float: left;
-}
 #messages
 {
     display: none;