diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css index ee03bad652..3c4053837a 100644 --- a/mayan/apps/appearance/static/appearance/css/base.css +++ b/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); + } +} diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js index 3d35bd5107..677d3b32e8 100644 --- a/mayan/apps/appearance/static/appearance/js/mayan_app.js +++ b/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()) { diff --git a/mayan/apps/appearance/templates/appearance/main_menu.html b/mayan/apps/appearance/templates/appearance/main_menu.html index 3bddb21b6f..6777a15a85 100644 --- a/mayan/apps/appearance/templates/appearance/main_menu.html +++ b/mayan/apps/appearance/templates/appearance/main_menu.html @@ -33,6 +33,9 @@ {% endfor %} {% endfor %} +