Add some loading spinners in Admin > Attributes > Tags

app/coffee/modules/admin/project-values.coffee

@@ -724,8 +724,8 @@ class ProjectTagsController extends taiga.Controller
 
     loadTags: =>
         return @rs.projects.tagsColors(@scope.projectId).then (tags) =>
-            @scope.projectTagsAll = _.map(tags.getAttrs(), (color, name) =>
+            @scope.projectTagsAll = _.map tags.getAttrs(), (color, name) =>
-                                            @model.make_model('tag', {name: name, color: color}))
+                @model.make_model('tag', {name: name, color: color})
             @.filterAndSortTags()
             @.loading = false
 
@@ -735,17 +735,20 @@ class ProjectTagsController extends taiga.Controller
             (tag) => tag.name.indexOf(@scope.tagsFilter.name) != -1
         )
 
-    deleteTag: (tag) =>
-        return @rs.projects.deleteTag(@scope.projectId, tag)
-
     createTag: (tag, color) =>
         return @rs.projects.createTag(@scope.projectId, tag, color)
 
     editTag: (from_tag, to_tag, color) =>
         if from_tag == to_tag
             to_tag = null
+
         return @rs.projects.editTag(@scope.projectId, from_tag, to_tag, color)
 
+    deleteTag: (tag) =>
+        @scope.loadingDelete = true
+        return @rs.projects.deleteTag(@scope.projectId, tag).finally =>
+            @scope.loadingDelete = false
+
     startMixingTags: (tag) =>
         @scope.mixingTags.toTag = tag.name
 
@@ -760,9 +763,13 @@ class ProjectTagsController extends taiga.Controller
     confirmMixingTags: () =>
         toTag = @scope.mixingTags.toTag
         fromTags = @scope.mixingTags.fromTags
-        @rs.projects.mixTags(@scope.projectId, toTag, fromTags).then =>
+        @scope.loadingMixing = true
+        @rs.projects.mixTags(@scope.projectId, toTag, fromTags)
+            .then =>
                 @.cancelMixingTags()
                 @.loadTags()
+            .finally =>
+                @scope.loadingMixing = false
 
     cancelMixingTags: () =>
         @scope.mixingTags.toTag = null
@@ -825,7 +832,7 @@ ProjectTagsDirective = ($log, $repo, $confirm, $location, animationFrame, $trans
             if focus
                 $el.find(".new-value input:visible").first().focus()
 
-        saveValue = (target) ->
+        saveValue = (target) =>
             formEl = target.parents("form")
             form = formEl.checksley()
             return if not form.validate()
@@ -834,29 +841,35 @@ ProjectTagsDirective = ($log, $repo, $confirm, $location, animationFrame, $trans
             originalTag = tag.clone()
             originalTag.revert()
 
+            $scope.loadingEdit = true
             promise = $ctrl.editTag(originalTag.name, tag.name, tag.color)
             promise.then =>
-                $ctrl.loadTags()
+                $ctrl.loadTags().then =>
                     row = target.parents(".row.table-main")
                     row.addClass("hidden")
+                    $scope.loadingEdit = false
                     row.siblings(".visualization").removeClass('hidden')
 
             promise.then null, (response) ->
+                $scope.loadingEdit = false
                 form.setErrors(response.data)
 
-        saveNewValue = (target) ->
+        saveNewValue = (target) =>
             formEl = target.parents("form")
             formEl = target
             form = formEl.checksley()
             return if not form.validate()
 
+            $scope.loadingCreate = true
             promise = $ctrl.createTag($scope.newValue.tag, $scope.newValue.color)
             promise.then (data) =>
+                $ctrl.loadTags().then =>
+                    $scope.loadingCreate = false
                     target.addClass("hidden")
-                $ctrl.loadTags()
                     initializeNewValue()
 
             promise.then null, (response) ->
+                $scope.loadingCreate = false
                 form.setErrors(response.data)
 
         cancel = (target) ->

app/partials/includes/modules/admin/project-tags.jade

@@ -22,7 +22,7 @@ section
                     data-maxlength="255"
                 )
 
-            .options-column
+            .options-column(tg-loading="loadingCreate")
                 a.add-new.e2e-save(href="")
                     tg-svg(
                         title="{{'COMMON.ADD' | translate}}",
@@ -103,7 +103,7 @@ section
                                         title="{{'ADMIN.COMMON.TITLE_ACTION_EDIT_VALUE' | translate}}"
                                     )
 
-                                a.delete-tag(href="")
+                                a.delete-tag(href="", tg-loading="loadingDelete")
                                     tg-svg(
                                         svg-icon="icon-trash"
                                         title="{{'ADMIN.COMMON.TITLE_ACTION_DELETE_VALUE' | translate}}"
@@ -127,7 +127,7 @@ section
                                     data-maxlength="255"
                                 )
 
-                            .options-column
+                            .options-column(tg-loading="loadingEdit")
                                 a.save.e2e-save(href="")
                                     tg-svg(
                                         title="{{'COMMON.SAVE' | translate}}"
@@ -145,7 +145,9 @@ section
                     tg-bind-scope
                 )
                     form(tg-bind-scope)
-                        .row.mixing-row.table-main.visualization(class="{{ ctrl.mixingClass(tag) }}")
+                        .row.mixing-row.table-main.visualization(
+                            ng-class="ctrl.mixingClass(tag)"
+                        )
                             .color-column
                                 .current-color(
                                     ng-if="tag.color"
@@ -158,25 +160,27 @@ section
                             .status-name
                                 span(tg-bo-html="tag.name")
 
-                            .mixing-options-column
+                            .mixing-options-column(
-                                .mixing-help-text(
                                 ng-if="mixingTags.toTag === tag.name"
+                                tg-loading="loadingMixing"
+                            )
+                                .mixing-help-text(
                                     translate="ADMIN.PROJECT_VALUES_TAGS.MIXING_HELP_TEXT"
                                 )
                                 a.mixing-confirm.button-green(
                                     href=""
-                                    ng-if="mixingTags.toTag === tag.name && mixingTags.fromTags.length"
+                                    ng-if="mixingTags.fromTags.length"
                                     translate="ADMIN.PROJECT_VALUES_TAGS.MIXING_MERGE"
                                 )
                                 a.mixing-cancel.button-gray(
                                     href=""
-                                    ng-if="mixingTags.toTag === tag.name"
                                     translate="COMMON.CANCEL"
                                 )
-                                span.mixing-selected(
+
+                            .mixing-options-column(
                                 ng-if="mixingTags.fromTags.indexOf(tag.name) !== -1"
                             )
-                                    tg-svg(
+                                tg-svg.mixing-selected(
                                     title="{{'ADMIN.PROJECT_VALUES_TAGS.SELECTED' | translate}}"
                                     svg-icon="icon-merge"
                                 )

app/styles/layout/admin-project-tags.scss

@@ -17,6 +17,10 @@
     }
     .options-column {
         display: flex;
+        .loading-spinner {
+            margin-right: 1.2rem;
+            width: 1.2rem;
+        }
     }
     .current-color {
         &.empty-color {
@@ -80,6 +84,10 @@
                 cursor: default;
             }
         }
+        .loading-spinner {
+            margin-right: 1.2rem;
+            width: 1.2rem;
+        }
     }
     .mix-tags {
         position: relative;
@@ -94,6 +102,10 @@
     }
     .mixing-options-column {
         text-align: right;
+        .loading-spinner {
+            margin-right: 1.2rem;
+            width: 1.2rem;
+        }
     }
     .mixing-tags-from,
     .mixing-tags-to {