added loading icon to account page while image uploads

app/assets/javascripts/src/Metamaps.js

@@ -4429,6 +4429,17 @@ Metamaps.Account = {
 
         $('.userImageMenu').hide();
     },
+    showLoading: function(){
+        var self = Metamaps.Account;
+
+        var loader = new CanvasLoader('accountPageLoading');
+        loader.setColor('#4FC059'); // default is '#000000'
+        loader.setDiameter(28); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+        $('#accountPageLoading').show();
+    },
     showImagePreview: function(){
         var self = Metamaps.Account;
 

app/assets/stylesheets/application.css

@@ -448,6 +448,13 @@ input[type="submit"]:active {
 
 }
 
+#accountPageLoading {
+    display: none;
+    position: absolute;
+    bottom: 16px;
+    right: 120px;
+}
+
 .centerGreyForm input[type="text"],
 .centerGreyForm input[type="email"],
 .centerGreyForm input[type="password"] {

app/views/users/edit.html.erb

@@ -49,6 +49,7 @@
   <%= form.password_field :password_confirmation, :autocomplete => :off%></div>
   <div class="noChangePass" onclick="Metamaps.Account.hidePass()">Oops, don't change password</div>
 </div>
-  <%= form.submit "Update", class: "update" %>
+  <div id="accountPageLoading"></div>
+  <%= form.submit "Update", class: "update", onclick: "Metamaps.Account.showLoading()" %>
 <% end %>
 </div>