Añadir spinner al cambio de imagen del perfil de usuario #342

app/coffee/modules/user-settings/main.coffee

@@ -128,14 +128,16 @@ UserAvatarDirective = ($auth, $model, $rs, $confirm) ->
             target = angular.element(event.currentTarget)
 
             promise = $rs.userSettings.changeAvatar($scope.avatarAttachment)
-
+            $el.find('.overlay').show();
             promise.then (response) ->
                 user = $model.make_model("users", response.data)
                 $auth.setUser(user)
                 $scope.user = user
+                $el.find('.overlay').hide();
                 $confirm.notify('success')
             promise.then null, (response) ->
                 console.log response
+                $el.find('.overlay').hide();
                 $confirm.notify('error', response.data._error_message)
 
     return {link:link}

app/partials/user-profile.jade

@@ -18,7 +18,10 @@ block content
                 div.container
                     div.avatar-container
                         fieldset(tg-user-avatar)
-                            img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
+                            .image-container
+                                img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
+                                div.overlay
+                                    span.icon.icon-spinner
                             input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
                             p The image will be cropped to 80x80 size.
                             a.button.button-green.change Change

app/styles/modules/user-settings/user-profile.scss

@@ -8,11 +8,32 @@
         .avatar-container {
             @include table-flex-child(1, 0, 0);
             margin-right: 1rem;
+            .image-container {
+                position: relative;
+            }
             img {
                 border: 2px solid $white;
                 border-radius: 8%;
                 width: 100%;
             }
+            .overlay {
+                background: rgba($white, .9);
+                bottom: 0;
+                left: 0;
+                display: none;
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
+            .icon-spinner {
+                @extend %xlarge;
+                //@include transform(translate(50%, 50%));
+                @include animation(spin infinite .8s linear);
+                color: $gray-light;
+                left: 40%;
+                position: absolute;
+                top: 40%;
+            }
             p {
                 @extend %xsmall;
                 margin-bottom: 0;