Create loading service

client/index.html

@@ -28,8 +28,9 @@
                     <div ng-include="'./partials/login.html'"></div>
 					<!-- Machine Details Overlay -->
                     <div ng-include="'./partials/home/machineDetails.html'"></div>
+					<div ng-include="'./partials/loading.html'"></div>
 
-                    <!-- Nav -->
+					<!-- Nav -->
                     <div ng-include="'./partials/nav.html'"></div>
                 </div>
             </div>
@@ -79,6 +80,7 @@
     <script src="./js/services/Identity.js"></script>
     <script src="./js/services/Image.js"></script>
     <script src="./js/services/Compute.js"></script>
+    <script src="./js/services/Loading.js"></script>
 	
     <!-- Include controller -->
     <script src="./js/controllers/login.js"></script>

client/js/controllers/home/main.js

@@ -3,24 +3,28 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
+mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading', function ($scope, Compute, $rootScope, Loading)
 {
 
 	var callMeAfterPullData=function(data){
 		$scope.machines=Compute.getData().machines;
+			Loading.stop();
 	}
 
-
+	Loading.start();
 	Compute.pullData(callMeAfterPullData);
 
 
 	
 	$scope.raiseShowMachineDetailsEvent=function(id){
+
 		var callback=function(){
+			Loading.stop();
 			var data=Compute.getData();
 			$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);		
 	
 		}
+		Loading.start();
 		Compute.pullMachines(callback);
 	}
 

client/js/services/Loading.js

@@ -0,0 +1,22 @@
+
+mainApp.factory('Loading',[ '$http', 'Identity', function($http, Identity){
+
+
+
+
+	var start=function(){
+		$('#loadingModal').modal({backdrop: 'static', keyboard: false});	
+	};
+
+	var stop=function(){
+		$('#loadingModal').modal('hide');
+	}
+
+
+	return {
+		start:start,
+		stop:stop
+	};
+
+
+}]);

client/partials/loading.html

@@ -0,0 +1,18 @@
+<div class="modal fade" id="loadingModal" ng-controller="loginCtrl">
+    <div class="modal-dialog">
+        <div class="modal-content"></div>
+    </div>
+    <div class="modal-dialog" style="width:200px;">
+        <div class="modal-content">
+
+            <div class="modal-body" >
+				<div align="center">
+					<img src="images/spin/128x128/Preloader_8.gif" />
+				</div>
+
+
+            </div>
+
+        </div>
+    </div>
+</div>