From 3a6e326e5e2b38e9c8fba9cc5f5f00d2ad33711d Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Thu, 7 Jul 2016 12:44:58 +1200
Subject: [PATCH] feat(ui): replace ViewSpinner with JQuery animations

---
 app/components/container/container.html       |  4 ++-
 .../container/containerController.js          | 30 +++++++++----------
 .../containerLogs/containerLogsController.js  | 14 ++++-----
 .../containerLogs/containerlogs.html          |  4 ++-
 app/components/containers/containers.html     |  3 ++
 .../containers/containersController.js        | 14 ++++-----
 .../createContainerController.js              | 20 ++++++-------
 .../createContainer/createcontainer.html      |  3 ++
 .../createNetwork/createNetworkController.js  | 12 ++++----
 .../createNetwork/createnetwork.html          |  3 ++
 .../createVolume/createVolumeController.js    | 12 ++++----
 app/components/createVolume/createvolume.html |  3 ++
 app/components/images/images.html             |  4 +++
 app/components/images/imagesController.js     | 22 +++++++-------
 app/components/network/network.html           |  4 ++-
 app/components/network/networkController.js   | 22 +++++++-------
 app/components/networks/networks.html         |  3 ++
 app/components/networks/networksController.js | 14 ++++-----
 app/components/volumes/volumes.html           |  3 ++
 app/components/volumes/volumesController.js   | 14 ++++-----
 app/shared/services.js                        | 14 ---------
 bower.json                                    |  3 +-
 gruntFile.js                                  |  1 -
 23 files changed, 119 insertions(+), 107 deletions(-)

diff --git a/app/components/container/container.html b/app/components/container/container.html
index 05803ca02..d3e334f28 100644
--- a/app/components/container/container.html
+++ b/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>
diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js
index b33f1eea4..49248a161 100644
--- a/app/components/container/containerController.js
+++ b/app/components/container/containerController.js
@@ -1,6 +1,6 @@
 angular.module('container', [])
-.controller('ContainerController', ['$scope', '$stateParams', '$state', '$filter', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
-function ($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, $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();
     });
   };
 
diff --git a/app/components/containerLogs/containerLogsController.js b/app/components/containerLogs/containerLogsController.js
index 0f1280792..56273ee0c 100644
--- a/app/components/containerLogs/containerLogsController.js
+++ b/app/components/containerLogs/containerLogsController.js
@@ -1,6 +1,6 @@
 angular.module('containerLogs', [])
-.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container', 'ViewSpinner',
-function ($scope, $stateParams, $anchorScroll, ContainerLogs, Container, ViewSpinner) {
+.controller('ContainerLogsController', ['$scope', '$stateParams', '$anchorScroll', 'ContainerLogs', 'Container',
+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() {
diff --git a/app/components/containerLogs/containerlogs.html b/app/components/containerLogs/containerlogs.html
index ab28e8c7d..fc4765891 100644
--- a/app/components/containerLogs/containerlogs.html
+++ b/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>
diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
index d24cf5549..c39a5ca84 100644
--- a/app/components/containers/containers.html
+++ b/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">
diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js
index c22d1e51f..76fc50428 100644
--- a/app/components/containers/containersController.js
+++ b/app/components/containers/containersController.js
@@ -1,6 +1,6 @@
 angular.module('containers', [])
-.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', 'ViewSpinner', 'Config', 'errorMsgFilter',
-function ($scope, Container, Settings, Messages, ViewSpinner, Config, errorMsgFilter) {
+.controller('ContainersController', ['$scope', 'Container', 'Settings', 'Messages', '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();
     }
   };
 
diff --git a/app/components/createContainer/createContainerController.js b/app/components/createContainer/createContainerController.js
index ba4d929db..3581e6176 100644
--- a/app/components/createContainer/createContainerController.js
+++ b/app/components/createContainer/createContainerController.js
@@ -1,6 +1,6 @@
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$scope', '$state', 'Config', 'Container', 'Image', 'Volume', 'Network', 'Messages', 'ViewSpinner', 'errorMsgFilter',
-function ($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, 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);
     });
   }
diff --git a/app/components/createContainer/createcontainer.html b/app/components/createContainer/createcontainer.html
index b1b1f5a3f..444db30c3 100644
--- a/app/components/createContainer/createcontainer.html
+++ b/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>
diff --git a/app/components/createNetwork/createNetworkController.js b/app/components/createNetwork/createNetworkController.js
index 44a7bd858..f24622f07 100644
--- a/app/components/createNetwork/createNetworkController.js
+++ b/app/components/createNetwork/createNetworkController.js
@@ -1,6 +1,6 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
+.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', '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);
     });
   }
diff --git a/app/components/createNetwork/createnetwork.html b/app/components/createNetwork/createnetwork.html
index f4ae1d756..f6f332270 100644
--- a/app/components/createNetwork/createnetwork.html
+++ b/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>
diff --git a/app/components/createVolume/createVolumeController.js b/app/components/createVolume/createVolumeController.js
index d33d4c7e1..fb347adb1 100644
--- a/app/components/createVolume/createVolumeController.js
+++ b/app/components/createVolume/createVolumeController.js
@@ -1,6 +1,6 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', 'ViewSpinner', 'errorMsgFilter',
-function ($scope, $state, Volume, Messages, ViewSpinner, errorMsgFilter) {
+.controller('CreateVolumeController', ['$scope', '$state', 'Volume', 'Messages', '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);
     });
   }
diff --git a/app/components/createVolume/createvolume.html b/app/components/createVolume/createvolume.html
index d6fb53e5a..b60bc1a27 100644
--- a/app/components/createVolume/createvolume.html
+++ b/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>
diff --git a/app/components/images/images.html b/app/components/images/images.html
index 0a539ee8a..3b060ebdc 100644
--- a/app/components/images/images.html
+++ b/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">
diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js
index 20dbf294f..303673ee0 100644
--- a/app/components/images/imagesController.js
+++ b/app/components/images/imagesController.js
@@ -1,6 +1,6 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', '$state', 'Image', 'ViewSpinner', 'Messages',
-function ($scope, $state, Image, ViewSpinner, Messages) {
+.controller('ImagesController', ['$scope', '$state', 'Image', '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();
     });
   }
 
diff --git a/app/components/network/network.html b/app/components/network/network.html
index 596dfc6bf..36bec67ec 100644
--- a/app/components/network/network.html
+++ b/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>
diff --git a/app/components/network/networkController.js b/app/components/network/networkController.js
index cbfb7966c..a38c5474f 100644
--- a/app/components/network/networkController.js
+++ b/app/components/network/networkController.js
@@ -1,37 +1,37 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
+.controller('NetworkController', ['$scope', 'Network', '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();
   });
 }]);
diff --git a/app/components/networks/networks.html b/app/components/networks/networks.html
index 381fd500e..38d6a6410 100644
--- a/app/components/networks/networks.html
+++ b/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">
diff --git a/app/components/networks/networksController.js b/app/components/networks/networksController.js
index c3e8dbc8b..124b18129 100644
--- a/app/components/networks/networksController.js
+++ b/app/components/networks/networksController.js
@@ -1,6 +1,6 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', 'Network', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Network, ViewSpinner, Messages, errorMsgFilter) {
+.controller('NetworksController', ['$scope', 'Network', '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();
diff --git a/app/components/volumes/volumes.html b/app/components/volumes/volumes.html
index b4f55107e..1d41c574e 100644
--- a/app/components/volumes/volumes.html
+++ b/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">
diff --git a/app/components/volumes/volumesController.js b/app/components/volumes/volumesController.js
index 750c683f7..4b684e60c 100644
--- a/app/components/volumes/volumesController.js
+++ b/app/components/volumes/volumesController.js
@@ -1,6 +1,6 @@
 angular.module('volumes', [])
-.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
-function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
+.controller('VolumesController', ['$scope', 'Volume', '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();
diff --git a/app/shared/services.js b/app/shared/services.js
index 102d011d4..376b820cd 100644
--- a/app/shared/services.js
+++ b/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 {
diff --git a/bower.json b/bower.json
index cb28dcf38..3938178e9 100644
--- a/bower.json
+++ b/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"
diff --git a/gruntFile.js b/gruntFile.js
index 606b7fc73..b5e1a6c98 100644
--- a/gruntFile.js
+++ b/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',