sync spinner

app/assets/javascripts/app/frontend/controllers/header.js

@@ -72,7 +72,11 @@ angular.module('app.frontend')
     }
 
     this.refreshData = function() {
+      this.isRefreshing = true;
       apiController.sync(function(response){
+        $timeout(function(){
+          this.isRefreshing = false;
+        }.bind(this), 200)
         if(!response) {
           alert("There was an error syncing. Please try again. If all else fails, log out and log back in.");
         } else {

app/assets/javascripts/app/services/apiController.js

@@ -239,9 +239,12 @@ angular.module('app.frontend')
           modelManager.clearDirtyItems();
           this.syncToken = response.sync_token;
           $rootScope.$broadcast("sync:updated_token", this.syncToken);
+
           this.handleItemsResponse(response.retrieved_items, null);
           // merge only metadata for saved items
-          this.handleItemsResponse(response.saved_items, ["content", "enc_item_key", "auth_hash"]);
+          var omitFields = ["content", "enc_item_key", "auth_hash"];
+          this.handleItemsResponse(response.saved_items, omitFields);
+
           if(callback) {
             callback(response);
           }

app/assets/stylesheets/app/_header.scss

@@ -246,3 +246,17 @@ a.disabled {
       }
     }
 }
+
+.spinner {
+  height: 10px;
+  width: 10px;
+  animation: rotate 0.8s infinite linear;
+  border: 1px solid #515263;
+  border-right-color: transparent;
+  border-radius: 50%;
+}
+
+@keyframes rotate {
+  0%    { transform: rotate(0deg); }
+  100%  { transform: rotate(360deg); }
+}

app/assets/templates/frontend/header.html.haml

@@ -94,6 +94,9 @@
     .menu.right
       .items
         .item.last-refreshed{"ng-if" => "ctrl.lastSyncDate"}
-          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
+          %span{"ng-if" => "!ctrl.isRefreshing"}
+            Last refreshed {{ctrl.lastSyncDate | appDateTime}}
+          %span{"ng-if" => "ctrl.isRefreshing"}
+            .spinner
         .item{"ng-click" => "ctrl.refreshData()"}
           Refresh

vendor/assets/javascripts/transpiled.js

@@ -779,7 +779,11 @@ angular.module('app.frontend').controller('BaseCtrl', BaseCtrl);
   };
 
   this.refreshData = function () {
+    this.isRefreshing = true;
     apiController.sync(function (response) {
+      $timeout(function () {
+        this.isRefreshing = false;
+      }.bind(this), 200);
       if (!response) {
         alert("There was an error syncing. Please try again. If all else fails, log out and log back in.");
       } else {
@@ -1783,9 +1787,12 @@ var User = function User(json_obj) {
         modelManager.clearDirtyItems();
         this.syncToken = response.sync_token;
         $rootScope.$broadcast("sync:updated_token", this.syncToken);
+
         this.handleItemsResponse(response.retrieved_items, null);
         // merge only metadata for saved items
-        this.handleItemsResponse(response.saved_items, ["content", "enc_item_key", "auth_hash"]);
+        var omitFields = ["content", "enc_item_key", "auth_hash"];
+        this.handleItemsResponse(response.saved_items, omitFields);
+
         if (callback) {
           callback(response);
         }