Add custom AJAX spinner.

Signed-off-by: Roberto Rosario <roberto.rosario.gonzalez@gmail.com>

mayan/apps/appearance/static/appearance/css/base.css

@@ -718,3 +718,38 @@ a i {
   height: auto;
   margin: auto;
 }
+
+#ajax-spinner {
+    margin-top: 12px;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 2px solid #222;
+    border-top: 2px solid #03A9F4;
+    border-bottom: 2px solid #03A9F4;
+    -webkit-animation: .5s spin linear infinite;
+    animation: .5s spin linear infinite;
+}
+
+@-webkit-keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -6,6 +6,8 @@ class MayanApp {
 
         parameters = parameters || {}
 
+        this.ajaxSpinnerSeletor = '#ajax-spinner';
+        this.ajaxExecuting = false;
         this.window = $(window);
     }
 
@@ -105,6 +107,12 @@ class MayanApp {
       });
     }
 
+    callbackAJAXSpinnerUpdate () {
+        if (this.ajaxExecuting) {
+            $(this.ajaxSpinnerSeletor).fadeIn(50);
+        }
+    }
+
     doRefreshMainMenu (options) {
         $.ajax({
             complete: function() {
@@ -112,7 +120,7 @@ class MayanApp {
             },
             success: function(data) {
                 var $elements = $('.dropdown.open');
-                if ($elements.length === 0) {
+                if (($elements.length === 0) && (this.ajaxExecuting === false)) {
                     // Don't refresh the HTML if there are open dropdowns
                     $('#main-menu').html(data);
                 }
@@ -193,7 +201,8 @@ class MayanApp {
     }
 
     initialize () {
-        this.setupAJAXperiodicWorkers();
+        this.setupAJAXPeriodicWorkers();
+        this.setupAJAXSpinner();
         this.setupAutoSubmit();
         this.setupFullHeightResizing();
         this.setupItemsSelector();
@@ -206,7 +215,7 @@ class MayanApp {
         partialNavigation.initialize();
     }
 
-    setupAJAXperiodicWorkers () {
+    setupAJAXPeriodicWorkers () {
         var app = this;
 
         $('a[data-apw-url]').each(function() {
@@ -222,6 +231,26 @@ class MayanApp {
         });
     }
 
+    setupAJAXSpinner () {
+        var self = this;
+
+        $(document).ajaxStart(function() {
+            self.ajaxExecuting = true;
+            setTimeout(
+                function () {
+                    self.callbackAJAXSpinnerUpdate();
+                }, 150
+            );
+        });
+
+        $(document).ready(function() {
+            $(document).ajaxStop(function() {
+                $(self.ajaxSpinnerSeletor).fadeOut();
+                self.ajaxExecuting = false;
+            });
+        });
+    }
+
     setupAutoSubmit () {
         $('body').on('change', '.select-auto-submit', function () {
             if ($(this).val()) {

mayan/apps/appearance/templates/appearance/main_menu.html

@@ -33,6 +33,9 @@
                     {% endfor %}
                 {% endfor %}
             </ul>
+            <div class="nav navbar-nav navbar-right">
+                <div class="hidden-xs hidden-sm" id="ajax-spinner"></div>
+            </div>
         </div>
     </div>
 </nav>