[fix] indicate loading during latency

- show loading dialog for process that have a latency
  on slow internet connections
- add event emitters for starting and finishing tasks
- hide upload button after upload

app/templates/dashboard.html

@@ -40,10 +40,13 @@
             <div class="panel panel-default" ng-class="imageurl ? 'workspace' : 'fixed-workspace'">
                 <div class="panel-body">
                     {% verbatim %}
-                    <div id="button-wrapper" ng-hide="imageurl">
-                        <button ngf-select="upload($file)" ngf-pattern="'image/*'" ngf-accept="'image/*'">
+                    <div id="button-wrapper">
+                        <button ngf-select="upload($file)" ngf-pattern="'image/*'" ngf-accept="'image/*'" ng-hide="hide_upload_btn">
                             <p>Upload an image</p>
                         </button>
+                        <button type="button" ng-hide="!loading">
+                            <p><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading ...</p>
+                        </button>
                     </div>
                     {% endverbatim %}
                     <div class="drop-placeholder" ng-repeat="image in images | orderBy: '-created_at'">

app/templates/static/scripts/controller.js

@@ -1,14 +1,19 @@
 angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainService', function ($scope, Upload, MainService) {
 
     $scope.imageuploaded = false;
+    $scope.loading = false;
+    $scope.hide_upload_btn = false;
 
     $scope.upload = function (file) {
+        $scope.hide_upload_btn = true;
+        $scope.$emit('startworking');
         Upload.upload({
             url: '/api/images/',
             data: {'image': file}
         }).then(function (response) {
             $scope.imageuploaded = true;
             $scope.$emit('uploadComplete');
+            $scope.$emit('finishworking');
             console.log('photo uploaded successfully');
         }, function (error) {
             console.log('photo uploaded error: ' + error.status);
@@ -36,6 +41,7 @@ angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainServi
         angular.forEach($scope.effectsModel, function (value, key) {
             if (value) {
                 $scope.applyeffects.push(key);
+                $scope.$emit('startworking');
             }
         });
         $scope.$emit('addeffect');
@@ -48,6 +54,7 @@ angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainServi
             then(function (result) {
                 $scope.imageurl = result.phedited_image;
                 $scope.$emit('sharable_url');
+                $scope.$emit('finishworking');
             }).
             catch(function (response) {
                 console.log("failed to apply effects");
@@ -81,5 +88,15 @@ angular.module('pheditApp').controller('MyCtrl', ['$scope', 'Upload', 'MainServi
         $scope.imageurl = ""
         $scope.share_url = ""
         $scope.imageuploaded = false;
+        $scope.hide_upload_btn = false;
     });
+
+    $scope.$on('startworking', function () {
+        $scope.loading = true;
+    });
+
+    $scope.$on('finishworking', function () {
+        $scope.loading = false;
+    });
+
 }]);

app/templates/static/styles/index.css

@@ -603,3 +603,18 @@ input[type=checkbox] {
     z-index: 4;
     left: 33%
 }
+
+.glyphicon-refresh-animate {
+    -animation: spin .7s infinite linear;
+    -webkit-animation: spin2 .7s infinite linear;
+}
+
+@-webkit-keyframes spin2 {
+    from { -webkit-transform: rotate(0deg);}
+    to { -webkit-transform: rotate(360deg);}
+}
+
+@keyframes spin {
+    from { transform: scale(1) rotate(0deg);}
+    to { transform: scale(1) rotate(360deg);}
+}