feat(ui): replace ViewSpinner with JQuery animations (#43)

app/components/container/container.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Container details"></rd-header-title>
+  <rd-header-title title="Container details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a>
   </rd-header-content>

app/components/container/containerController.js

@@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
+.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', '$timeout',
-function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, ViewSpinner, $timeout) {
+function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Image, Messages, $timeout) {
   $scope.changes = [];
   $scope.editEnv = false;
   $scope.editPorts = false;
@@ -11,7 +11,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   var update = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.get({id: $stateParams.id}, function (d) {
       $scope.container = d;
       $scope.container.edit = false;
@@ -61,7 +61,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
         $scope.newCfg.Binds.push(bind);
       });
 
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     }, function (e) {
       if (e.status === 404) {
         $('.detail').hide();
@@ -69,13 +69,13 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
       } else {
         Messages.error("Failure", e.data);
       }
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     });
 
   };
 
   $scope.start = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.start({
       id: $scope.container.Id,
       HostConfig: $scope.container.HostConfig
@@ -89,7 +89,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.stop = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.stop({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container stopped", $stateParams.id);
@@ -100,7 +100,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.kill = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.kill({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container killed", $stateParams.id);
@@ -111,7 +111,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.commit = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     ContainerCommit.commit({id: $stateParams.id, repo: $scope.container.Config.Image}, function (d) {
       update();
       Messages.send("Container commited", $stateParams.id);
@@ -121,7 +121,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
     });
   };
   $scope.pause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.pause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container paused", $stateParams.id);
@@ -132,7 +132,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.unpause = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.unpause({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container unpaused", $stateParams.id);
@@ -143,7 +143,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.remove = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.remove({id: $stateParams.id}, function (d) {
       update();
       $state.go('containers', {}, {reload: true});
@@ -155,7 +155,7 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.restart = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.restart({id: $stateParams.id}, function (d) {
       update();
       Messages.send("Container restarted", $stateParams.id);
@@ -170,10 +170,10 @@ function ($scope, $stateParams, $state, $filter, Container, ContainerCommit, Ima
   };
 
   $scope.getChanges = function () {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Container.changes({id: $stateParams.id}, function (d) {
       $scope.changes = d;
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
     });
   };
 

app/components/containerLogs/containerLogsController.js

@@ -1,6 +1,6 @@
 angular.module('containerLogs', [])
-.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
+.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container',
-function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
+function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container) {
   $scope.state = {};
   $scope.state.displayTimestampsOut = false;
   $scope.state.displayTimestampsErr = false;
@@ -8,24 +8,24 @@ function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpi
   $scope.stderr = '';
   $scope.tailLines = 2000;
 
-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
   Container.get({id: $stateParams.id}, function (d) {
     $scope.container = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }, function (e) {
     if (e.status === 404) {
       Messages.error("Not found", "Container not found.");
     } else {
       Messages.error("Failure", e.data);
     }
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   });
 
   function getLogs() {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     getLogsStdout();
     getLogsStderr();
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }
 
   function getLogsStderr() {

app/components/containerLogs/containerlogs.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Container logs"></rd-header-title>
+  <rd-header-title title="Container logs">
+      <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Logs
   </rd-header-content>

app/components/containers/containers.html

@@ -10,6 +10,9 @@
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Containers">
+      <div class="pull-right">
+        <i id="loadContainersSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">

app/components/containers/containersController.js

@@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'Config', 'errorMsgFilter',
-function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
+function ($scope, Container, Settings, Messages, Config, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.displayAll = Settings.displayAll;
@@ -14,7 +14,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
   };
 
   var update = function (data) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
       var containers = d;
@@ -24,17 +24,17 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
       $scope.containers = containers.map(function (container) {
         return new ContainerViewModel(container);
       });
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
     });
   };
 
   var batch = function (items, action, msg) {
-    ViewSpinner.spin();
+    $('#loadContainersSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadContainersSpinner').hide();
         update({all: Settings.displayAll ? 1 : 0});
       }
     };
@@ -89,7 +89,7 @@ function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFi
       }
     });
     if (counter === 0) {
-      ViewSpinner.stop();
+      $('#loadContainersSpinner').hide();
     }
   };
 

app/components/createContainer/createContainerController.js

@@ -1,6 +1,6 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'ViewSpinner', 'errorMsgFilter',
+.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'errorMsgFilter',
-function ($scope, $state, Config, Container, Image, Volume, Network, Messages, ViewSpinner, errorMsgFilter) {
+function ($scope, $state, Config, Container, Image, Volume, Network, Messages, errorMsgFilter) {
 
   $scope.state = {
     alwaysPull: true
@@ -80,25 +80,25 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
   });
 
   function createContainer(config) {
-    ViewSpinner.spin();
+    $('#createContainerSpinner').show();
     Container.create(config, function (d) {
       if (d.Id) {
         var reqBody = config.HostConfig || {};
         reqBody.id = d.Id;
         Container.start(reqBody, function (cd) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.send('Container Started', d.Id);
           $state.go('containers', {}, {reload: true});
         }, function (e) {
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.error('Error', errorMsgFilter(e));
         });
       } else {
-        ViewSpinner.stop();
+        $('#createContainerSpinner').hide();
         Messages.error('Error', errorMsgFilter(d));
       }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
       Messages.error('Error', errorMsgFilter(e));
     });
   }
@@ -113,7 +113,7 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
   }
 
   function pullImageAndCreateContainer(config) {
-    ViewSpinner.spin();
+    $('#createContainerSpinner').show();
 
     var image = _.toLower(config.Image);
     var imageConfig = createImageConfig(image);
@@ -122,13 +122,13 @@ function ($scope, $state, Config, Container, Image, Volume, Network, Messages, V
         var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
         if (err) {
           var detail = data[data.length - 1];
-          ViewSpinner.stop();
+          $('#createContainerSpinner').hide();
           Messages.error('Error', detail.error);
         } else {
           createContainer(config);
         }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createContainerSpinner').hide();
       Messages.error('Error', 'Unable to pull image ' + image);
     });
   }

app/components/createContainer/createcontainer.html

@@ -306,6 +306,9 @@
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createContainerSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
     <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
     <a type="button" class="btn btn-default btn-lg" ui-sref="containers">Cancel</a>
   </div>

app/components/createNetwork/createNetworkController.js

@@ -1,6 +1,6 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'errorMsgFilter',
-function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
+function ($scope, $state, Messages, Network, errorMsgFilter) {
   $scope.formValues = {
     DriverOptions: []
   };
@@ -20,18 +20,18 @@ function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
   };
 
   function createNetwork(config) {
-    ViewSpinner.spin();
+    $('#createNetworkSpinner').show();
     Network.create(config, function (d) {
       if (d.Id) {
         Messages.send("Network created", d.Id);
-        ViewSpinner.stop();
+        $('#createNetworkSpinner').hide();
         $state.go('networks', {}, {reload: true});
       } else {
-        ViewSpinner.stop();
+        $('#createNetworkSpinner').hide();
         Messages.error('Unable to create network', errorMsgFilter(d));
       }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createNetworkSpinner').hide();
       Messages.error('Unable to create network', e.data);
     });
   }

app/components/createNetwork/createnetwork.html

@@ -74,6 +74,9 @@
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createNetworkSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
     <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
     <a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
   </div>

app/components/createVolume/createVolumeController.js

@@ -1,6 +1,6 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'errorMsgFilter',
-function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
+function ($scope, $state, Volume, Messages, errorMsgFilter) {
 
   $scope.formValues = {
     DriverOptions: []
@@ -19,18 +19,18 @@ function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
   };
 
   function createVolume(config) {
-    ViewSpinner.spin();
+    $('#createVolumeSpinner').show();
     Volume.create(config, function (d) {
       if (d.Name) {
         Messages.send("Volume created", d.Name);
-        ViewSpinner.stop();
+        $('#createVolumeSpinner').hide();
         $state.go('volumes', {}, {reload: true});
       } else {
-        ViewSpinner.stop();
+        $('#createVolumeSpinner').hide();
         Messages.error('Unable to create volume', errorMsgFilter(d));
       }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#createVolumeSpinner').hide();
       Messages.error('Unable to create volume', e.data);
     });
   }

app/components/createVolume/createvolume.html

@@ -63,6 +63,9 @@
 
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
+    <div>
+      <i id="createVolumeSpinner" class="fa fa-cog fa-3x fa-spin" style="margin-bottom: 5px; display: none;"></i>
+    </div>
     <button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
     <a type="button" class="btn btn-default btn-lg" ui-sref="volumes">Cancel</a>
   </div>

app/components/images/images.html

@@ -33,6 +33,7 @@
           <div class="form-group">
             <div class="col-sm-12">
               <button type="button" class="btn btn-default btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+              <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>
         </form>
@@ -45,6 +46,9 @@
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-clone" title="Images">
+        <div class="pull-right">
+          <i id="loadImagesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+        </div>
       </rd-widget-header>
       <rd-widget-taskbar classes="col-lg-12">
         <div class="pull-left">

app/components/images/imagesController.js

@@ -1,6 +1,6 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
+.controller('ImagesController', ['$scope', '$state', 'Image', 'Messages',
-function ($scope, $state, Image, ViewSpinner, Messages) {
+function ($scope, $state, Image, Messages) {
   $scope.state = {};
   $scope.sortType = 'Created';
   $scope.sortReverse = true;
@@ -45,32 +45,32 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
   }
 
   $scope.pullImage = function() {
-    ViewSpinner.spin();
+    $('#pullImageSpinner').show();
     var image = _.toLower($scope.config.Image);
     var imageConfig = createImageConfig(image);
     Image.create(imageConfig, function (data) {
         var err = data.length > 0 && data[data.length - 1].hasOwnProperty('error');
         if (err) {
           var detail = data[data.length - 1];
-          ViewSpinner.stop();
+          $('#pullImageSpinner').hide();
           Messages.error('Error', detail.error);
         } else {
-          ViewSpinner.stop();
+          $('#pullImageSpinner').hide();
           $state.go('images', {}, {reload: true});
         }
     }, function (e) {
-      ViewSpinner.stop();
+      $('#pullImageSpinner').hide();
       Messages.error('Error', 'Unable to pull image ' + image);
     });
   };
 
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadImagesSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadImagesSpinner').hide();
       }
     };
     angular.forEach($scope.images, function (i) {
@@ -85,6 +85,7 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
           complete();
         }, function (e) {
           Messages.error("Failure", e.data);
+          $('#loadImagesSpinner').hide();
           complete();
         });
       }
@@ -92,15 +93,14 @@ function ($scope, $state, Image, ViewSpinner, Messages) {
   };
 
   function fetchImages() {
-    ViewSpinner.spin();
     Image.query({}, function (d) {
       $scope.images = d.map(function (item) {
         return new ImageViewModel(item);
       });
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
     }, function (e) {
       Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadImagesSpinner').hide();
     });
   }
 

app/components/network/network.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Network details"></rd-header-title>
+  <rd-header-title title="Network details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
   <rd-header-content>
     Networks > <a ui-sref="network({id: network.Id})">{{ network.Name }}</a>
   </rd-header-content>

app/components/network/networkController.js

@@ -1,37 +1,37 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
+.controller('NetworkController', ['$scope', 'Network', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
+function ($scope, Network, Messages, $state, $stateParams, errorMsgFilter) {
 
   $scope.disconnect = function disconnect(networkId, containerId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Network.disconnect({id: $stateParams.id}, {Container: containerId}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.send("Container disconnected", containerId);
       $state.go('network', {id: $stateParams.id}, {reload: true});
     }, function (e) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.error("Failure", e.data);
     });
   };
 
   $scope.remove = function remove(networkId) {
-    ViewSpinner.spin();
+    $('#loadingViewSpinner').show();
     Network.remove({id: $stateParams.id}, function (d) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.send("Network removed", "");
       $state.go('networks', {});
     }, function (e) {
-      ViewSpinner.stop();
+      $('#loadingViewSpinner').hide();
       Messages.error("Failure", e.data);
     });
   };
 
-  ViewSpinner.spin();
+  $('#loadingViewSpinner').show();
   Network.get({id: $stateParams.id}, function (d) {
     $scope.network = d;
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   }, function (e) {
     Messages.error("Failure", e.data);
-    ViewSpinner.stop();
+    $('#loadingViewSpinner').hide();
   });
 }]);

app/components/networks/networks.html

@@ -10,6 +10,9 @@
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-sitemap" title="Networks">
+      <div class="pull-right">
+        <i id="loadNetworksSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">

app/components/networks/networksController.js

@@ -1,6 +1,6 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter',
+.controller('NetworksController', ['$scope', 'Network', 'Messages', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
+function ($scope, Network, Messages, errorMsgFilter) {
 
   $scope.state = {};
   $scope.state.toggle = false;
@@ -33,12 +33,12 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadNetworksSpinner').hide();
       }
     };
     angular.forEach($scope.networks, function (network) {
@@ -58,13 +58,13 @@ function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   function fetchNetworks() {
-    ViewSpinner.spin();
+    $('#loadNetworksSpinner').show();
     Network.query({}, function (d) {
       $scope.networks = d;
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
     }, function (e) {
       Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadNetworksSpinner').hide();
     });
   }
   fetchNetworks();

app/components/volumes/volumes.html

@@ -10,6 +10,9 @@
 <div class="col-lg-12">
   <rd-widget>
     <rd-widget-header icon="fa-cubes" title="Volumes">
+      <div class="pull-right">
+        <i id="loadVolumesSpinner" class="fa fa-cog fa-2x fa-spin" style="margin-top: 5px;"></i>
+      </div>
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">

app/components/volumes/volumesController.js

@@ -1,6 +1,6 @@
 angular.module('volumes', [])
-.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
+.controller('VolumesController', ['$scope', 'Volume', 'Messages', 'errorMsgFilter',
-function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
+function ($scope, Volume, Messages, errorMsgFilter) {
   $scope.state = {};
   $scope.state.toggle = false;
   $scope.state.selectedItemCount = 0;
@@ -32,12 +32,12 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   $scope.removeAction = function () {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
     var counter = 0;
     var complete = function () {
       counter = counter - 1;
       if (counter === 0) {
-        ViewSpinner.stop();
+        $('#loadVolumesSpinner').hide();
       }
     };
     angular.forEach($scope.volumes, function (volume) {
@@ -57,13 +57,13 @@ function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
   };
 
   function fetchVolumes() {
-    ViewSpinner.spin();
+    $('#loadVolumesSpinner').show();
     Volume.query({}, function (d) {
       $scope.volumes = d.Volumes;
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
     }, function (e) {
       Messages.error("Failure", e.data);
-      ViewSpinner.stop();
+      $('#loadVolumesSpinner').hide();
     });
   }
   fetchVolumes();

app/shared/services.js

@@ -160,20 +160,6 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
           firstLoad: firstLoad
         };
     }])
-    .factory('ViewSpinner', function ViewSpinnerFactory() {
-        'use strict';
-        var spinner = new Spinner();
-        var target = document.getElementById('view');
-
-        return {
-            spin: function () {
-                spinner.spin(target);
-            },
-            stop: function () {
-                spinner.stop();
-            }
-        };
-    })
     .factory('Messages', ['$rootScope', '$sanitize', function MessagesFactory($rootScope, $sanitize) {
         'use strict';
         return {

bower.json

@@ -34,12 +34,11 @@
     "angular-resource": "~1.5.0",
     "angular-ui-select": "~0.17.1",
     "bootstrap": "~3.3.6",
-    "font-awesome": "~4.5.0",
+    "font-awesome": "~4.6.3",
     "jquery": "1.11.1",
     "jquery.gritter": "1.7.4",
     "lodash": "4.12.0",
     "rdash-ui": "1.0.*",
-    "spin.js": "1.3"
   },
   "resolutions": {
     "angular": "1.5.5"

gruntFile.js

@@ -69,7 +69,6 @@ module.exports = function (grunt) {
                 'bower_components/jquery/dist/jquery.min.js',
                 'assets/js/jquery.gritter.js', // Using custom version to fix error in minified build due to "use strict"
                 'bower_components/bootstrap/dist/js/bootstrap.min.js',
-                'bower_components/spin.js/spin.js',
                 'bower_components/Chart.js/Chart.min.js',
                 'bower_components/lodash/dist/lodash.min.js',
                 'bower_components/oboe/dist/oboe-browser.js',