Add HTML buffer to reduce flicker on AJAX menu update. GitLab issue #511.

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

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

@@ -115,6 +115,9 @@ class MayanApp {
 
     doRefreshMainMenu (options) {
         var self = this;
+        var $mainMenu = $('#main-menu');
+        var $mainMenuBuffer = $('#main-menu-buffer');
+
         $.ajax({
             complete: function() {
                 setTimeout(app.doRefreshMainMenu, options.interval, options);
@@ -123,7 +126,12 @@ class MayanApp {
                 var $elements = $('.dropdown.open');
                 if ($elements.length === 0) {
                     // Don't refresh the HTML if there are open dropdowns
-                    $('#main-menu').html(data);
+                    $mainMenuBuffer.html(data);
+                    $mainMenuBuffer.show();
+                    $mainMenu.hide();
+                    $mainMenu.html($mainMenuBuffer.html());
+                    $mainMenu.show();
+                    $mainMenuBuffer.hide();
                 }
             },
             url: options.url,
@@ -240,7 +248,7 @@ class MayanApp {
             setTimeout(
                 function () {
                     self.callbackAJAXSpinnerUpdate();
-                }, 350
+                }, 450
             );
         });
 

mayan/apps/appearance/templates/appearance/root.html

@@ -36,6 +36,7 @@
             <div id="main-menu">
                 {% include 'appearance/main_menu.html' %}
             </div>
+            <div id="main-menu-buffer" style="display: none;"></div>
             <div class="container-fluid">
                 <div class="row">
                     <div class="col-xs-12">