Show in user interface the saving state of the task

assets/css/src/base.css

@@ -70,4 +70,3 @@ hr {
 .web-notification-icon:hover {
     color: #000;
 }
-

assets/css/src/board.css

@@ -155,3 +155,16 @@ div.draggable-item-selected {
     float: left;
     padding-right: 5px;
 }
+
+/* board saving state */
+.task-board-saving-state {
+    opacity: 0.3;
+}
+
+.task-board-saving-icon {
+    position: absolute;
+    margin: auto;
+    width: 100%;
+    text-align: center;
+    color: #000;
+}

assets/js/src/Board.js

@@ -108,9 +108,12 @@ Board.prototype.dragAndDrop = function() {
         placeholder: "draggable-placeholder",
         items: ".draggable-item",
         stop: function(event, ui) {
+            var taskId = ui.item.attr('data-task-id');
             ui.item.removeClass("draggable-item-selected");
+            self.changeTaskState(taskId);
+
             self.save(
-                ui.item.attr('data-task-id'),
+                taskId,
                 ui.item.parent().attr("data-column-id"),
                 ui.item.index() + 1,
                 ui.item.parent().attr('data-swimlane-id')
@@ -130,6 +133,12 @@ Board.prototype.dragAndDrop = function() {
     $(".board-task-list").sortable(params);
 };
 
+Board.prototype.changeTaskState = function(taskId) {
+    var task = $("div[data-task-id=" + taskId + "]");
+    task.addClass('task-board-saving-state');
+    task.find('.task-board-saving-icon').show();
+};
+
 Board.prototype.listen = function() {
     var self = this;