Add loading icon on board view

2 files changed, 14 insertions, 1 deletions

diff --git a/assets/js/src/base.js b/assets/js/src/base.js
index 8a0e04bd..ffad93b8 100644
--- a/assets/js/src/base.js
+++ b/assets/js/src/base.js
@@ -6,6 +6,14 @@ var Kanboard = (function() {
 
     return {
 
+        ShowLoadingIcon: function() {
+            $("body").append('<span id="app-loading-icon">&nbsp;<i class="fa fa-spinner fa-spin"></i></span>');
+        },
+
+        HideLoadingIcon: function() {
+            $("#app-loading-icon").remove();
+        },
+
         // Return true if the element#id exists
         Exists: function(id) {
             if (document.getElementById(id)) {
diff --git a/assets/js/src/board.js b/assets/js/src/board.js
index 45dbd24a..291ef737 100644
--- a/assets/js/src/board.js
+++ b/assets/js/src/board.js
@@ -20,6 +20,8 @@
         });
 
         Mousetrap.bind("s", function() {
+            Kanboard.ShowLoadingIcon();
+
             $.ajax({
                 cache: false,
                 url: $('.filter-display-mode:not([style="display: none;"]) a').attr('href'),
@@ -31,6 +33,7 @@
                     board_load_events();
                     compactview_reload();
                     $('.filter-display-mode').toggle();
+                    Kanboard.HideLoadingIcon();
                 }
             });
         });
@@ -128,7 +131,7 @@
                     });
                 });
 
-                return '<i class="fa fa-refresh fa-spin fa-2x"></i>';
+                return '<i class="fa fa-spinner fa-spin"></i>';
             }
         }).on("mouseenter", function() {
 
@@ -169,6 +172,7 @@
     function board_save(taskId, columnId, position, swimlaneId)
     {
         board_unload_events();
+        Kanboard.ShowLoadingIcon();
 
         $.ajax({
             cache: false,
@@ -188,6 +192,7 @@
                 Kanboard.InitAfterAjax();
                 board_load_events();
                 compactview_reload();
+                Kanboard.HideLoadingIcon();
             }
         });
     }