Feature: Add loading indicator (Redmine issue: #6332)

lib/hawat/blueprints/design_bs3/templates/_macros_chart.html

@@ -862,7 +862,7 @@
             {%- if chsection[0] in statistics or render_empty %}
                 <li role="presentation" class="text-center{% if active_first and not tmp['cntr'] %} active{% endif %}">
                     <a role="tab" data-toggle="tab"{%- if chsection[0] not in statistics and get_url_func %}data-api-url="{{ get_url_func(chsection[0]) }}"{%- endif %} data-dict-key="{{ chsection[0] }}" href="#tab-{{ id_prefix.replace('_', '-') }}-{{ chsection[0] }}" class="chart-tab">
-                        # {{ chsection[1] }}
+                        <span class="loading hidden">loading...</span><span class="label-tag">#</span> {{ chsection[1] }}
                     </a>
                 </li>
                 {%- if tmp.update({'cntr': tmp['cntr'] + 1}) %}{%- endif %}

lib/hawat/static/js/hawat-jquery.js

@@ -236,9 +236,13 @@ $(function() {
     //});
 
     $(document).on('show.bs.tab', 'a.chart-tab[data-api-url]', function (event) {
-        if (event.target.search_result_data != undefined) {
+        if (event.target.search_result_data != undefined || event.target.search_active) {
             return;
         }
+
+        event.target.search_active = true;
+        $(event.target).children('.loading, .label-tag').toggleClass('hidden');
+
         event.target.promise = $.getJSON(event.target.getAttribute('data-api-url'), function(data) {
             event.target.search_result_data = data;
 
@@ -249,6 +253,8 @@ $(function() {
             let stats = data['statistics'];
             rendering_functions[dict_key].forEach(rendering_func => rendering_func(stats));
             $(event.target.getAttribute('href') + ' div.chart-toolbar').removeClass('invisible');
+            event.target.search_active = false;
+            $(event.target).children('.loading, .label-tag').toggleClass('hidden');
         });
     });
 });