Adds spinner to loading images

Adds spinner and third-party tools modules

Adds spinner directive and config

bower.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "ngCordova": "~0.1.12-alpha",
     "socket.io-client": "https://github.com/Automattic/socket.io-client.git#1.3.4",
-    "angular-uuid4": "~0.3.0"
+    "angular-uuid4": "~0.3.0",
+    "angular-spinner": "https://github.com/urish/angular-spinner.git#~0.6.1"
   }
 }

client/www/app/app.module.js

@@ -47,6 +47,24 @@
     delete $httpProvider.defaults.headers.common["X-Requested-With"];
   })
 
+  .config(function (usSpinnerConfigProvider) {
+    usSpinnerConfigProvider.setDefaults({
+      lines: 11, // The number of lines to draw
+      length: 21, // The length of each line
+      width: 2, // The line thickness
+      radius: 19, // The radius of the inner circle
+      corners: 1, // Corner roundness (0..1)
+      rotate: 0, // The rotation offset
+      direction: 1, // 1: clockwise, -1: counterclockwise
+      color: '#000', // #rgb or #rrggbb or array of colors
+      speed: 0.8, // Rounds per second
+      trail: 48, // Afterglow percentage
+      // shadow: true, // Whether to render a shadow    
+      top: '50%', // Top position relative to parent
+      left: '50%' // Left position relative to parent
+    });
+  })
+
   .config(function($stateProvider, $urlRouterProvider) {
 
     $stateProvider

client/www/app/core/core.module.js

@@ -1,7 +1,6 @@
 (function() {
   'use strict';
 
-  angular.module('app.core', ['app.media', 'ngCordova', 'app.tools', 'app.data', 'uuid4']);
+  angular.module('app.core', ['app.media', 'app.data', 'app.tools', 'app.third-party.tools']);
 
 })();
-

client/www/app/core/third-party.tools.module.js

@@ -0,0 +1,6 @@
+(function() {
+  'use strict';
+
+  angular.module('app.third-party.tools', ['ngCordova','uuid4','angularSpinner']);
+
+})();

client/www/app/moment/items/showImage.directive.html

@@ -1,5 +1,6 @@
 <div class="card image-item-container">
   <div class="item item-image-wrap">
+  	<span ng-show="isDownloading" us-spinner></span>
     <img ng-src="data:image/jpeg;base64,{{ item.payload }}"/>
   </div>
 </div>

client/www/app/moment/items/showImage.directive.js

@@ -16,10 +16,10 @@
 
       function link(scope, element, attrs) {
         var vm = scope;
-
-        vm.activate   = activate;
-        vm.getPayload = getPayload;
-        vm.hasPayload = false; 
+        
+        vm.getPayload    = getPayload;
+        vm.hasPayload    = false;
+        vm.isDownloading = false;
 
         activate();
 
@@ -28,15 +28,17 @@
         function activate() {
           // NOTE: utilized $stateParams to access difference between moment and memento scope
           if ($stateParams.ID) {
+            vm.isDownloading = true;
             vm.getPayload(vm.item.url, vm.item.type)
             .then(function(payload) {
-              vm.item.payload = payload;
-              vm.hasPayload   = true;
+              vm.item.payload  = payload;
+              vm.hasPayload    = true;
+              vm.isDownloading = false;                            
             })
             .catch(function(err) {
               console.error('Error loading image item payload', err);
-            });            
-          } 
+            });
+          }
         }
 
         function getPayload (url, type) {

client/www/content/css/app.css

@@ -12,6 +12,7 @@
   height: auto;
   width: auto;
   max-width: 85vw;
+  min-height: 75vw;
   margin: 0 auto;
 }
 

client/www/index.html

@@ -14,22 +14,24 @@
     <!-- ionic/angularjs js -->
     <script src="lib/ionic/js/ionic.bundle.js"></script>
 
-    <!-- socket.io -->
-    <script src="lib/socket.io-client/socket.io.js"></script>
-
     <!-- cordova script (this will be a 404 during development) -->
     <script src="lib/ngCordova/dist/ng-cordova.js"></script>
     <script src="cordova.js"></script>
 
-    <!-- angular uuid generator library -->
+    <!-- Mementos Tools -->
+    <script src="lib/socket.io-client/socket.io.js"></script>
     <script src="lib/angular-uuid4/angular-uuid4.min.js"></script>
+    <script src="lib/spin.js/spin.js"></script>
+    <script src="lib/angular-spinner/angular-spinner.min.js"></script>
 
-    <!-- your app's js -->
+    <!-- Mementos' App Scripts -->
     <script src="app/auth/user.auth.module.js"></script>
     <script src="app/auth/user.signup.js"></script>
     <script src="app/auth/user.signin.js"></script>
 
     <script src="app/core/core.module.js"></script>
+
+    <script src="app/core/third-party.tools.module.js"></script>
 
     <script src="app/core/logout.js"></script>
     <script src="app/core/alerts.service.js"></script>