As part of, or after Bootstrap 5: Cypht: Add a spinner at least until…

… some messages are shown

modules/core/output_modules.php

@@ -650,7 +650,13 @@ class Hm_Output_loading_icon extends Hm_Output_Module {
      * Sort of ugly loading icon animated with js/css
      */
     protected function output() {
-        return '<div class="loading_icon"></div>';
+        return '
+        <div class="loading_icon"></div>
+        <div class="loading_spinner text-center">
+            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>';
     }
 }
 

modules/core/site.css

@@ -255,6 +255,22 @@ td {
   height: 6px;
   z-index: 1001;
 }
+.loading_spinner {
+  background-color: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  display: none;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  left: 12%;
+  z-index: 1001;
+  min-height: 100%;
+  padding-top: 20%;
+  color: #ccc;
+  width: 100%;
+  z-index: 1001;
+}
+
 .logout {
   margin: 2px;
   margin-left: 5px;

modules/core/site.js

@@ -99,7 +99,7 @@ var Hm_Ajax = {
         return;
     },
 
-    request: function(args, callback, extra, no_icon, batch_callback, on_failure) {
+    request: function(args, callback, extra, on_loading = false, batch_callback, on_failure) {
         var bcb = false;
         if (typeof batch_callback != 'undefined' && $.inArray(batch_callback, this.batch_callbacks) === -1) {
             bcb = batch_callback.toString();
@@ -111,34 +111,27 @@ var Hm_Ajax = {
                 Hm_Ajax.batch_callbacks[bcb] = 1;
             }
         }
-        var name = Hm_Ajax.get_ajax_hook_name(args);
+        var name = Hm_Ajax.get_ajax_hook_name(args)
         var ajax = new Hm_Ajax_Request();
-        if (!no_icon) {
-            Hm_Ajax.show_loading_icon();
-            $('body').addClass('wait');
-        }
         Hm_Ajax.active_reqs++;
-        return ajax.make_request(args, callback, extra, name, on_failure, batch_callback);
+        return ajax.make_request(args, callback, extra, name, on_failure, batch_callback, on_loading);
     },
 
     show_loading_icon: function() {
-        if (Hm_Ajax.icon_loading_id !== false) {
-            return;
-        }
-        var hm_loading_pos = $('.loading_icon').width()/40;
-        $('.loading_icon').show();
-        function move_background_image() {
-            hm_loading_pos = hm_loading_pos + 50;
-            $('.loading_icon').css('background-position', hm_loading_pos+'px 0');
-            Hm_Ajax.icon_loading_id = setTimeout(move_background_image, 100);
-        }
-        move_background_image();
+        Hm_Ajax.icon_loading_id = true;
+        $('.loading_bar').show();
+        $('.loading_spinner').show();
+        $('body').addClass('wait');
+        let width_nav_folder_cell= $('nav[class="folder_cell"]').css('width');
+        $('.loading_spinner').css('left', width_nav_folder_cell);
+
     },
 
     stop_loading_icon : function(loading_id) {
-        clearTimeout(loading_id);
-        $('.loading_icon').hide();
         Hm_Ajax.icon_loading_id = false;
+        $('.loading_bar').hide();
+        $('.loading_spinner').hide();
+        $('body').removeClass('wait');
     },
 
     process_callback_hooks: function(name, res) {
@@ -172,27 +165,36 @@ var Hm_Ajax_Request = function() { return {
     on_failure: false,
     start_time: 0,
 
-    xhr_fetch: function(config) {
+    xhr_fetch: function(config, on_loading) {
         var xhr = new XMLHttpRequest();
         var data = '';
         if (config.data) {
             data = this.format_xhr_data(config.data);
         }
         xhr.open('POST', window.location.href)
+        Hm_Ajax.stop_loading_icon();
+        xhr.addEventListener('loadstart', function () {
+            if (!on_loading) {
+                Hm_Ajax.show_loading_icon(); 
+            }
+        });
         xhr.addEventListener('load', function() {
             config.callback.done(Hm_Utils.json_decode(xhr.response, true), xhr);
             config.callback.always(Hm_Utils.json_decode(xhr.response, true));
         });
         xhr.addEventListener('error', function() {
-            Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id);
+            Hm_Ajax.stop_loading_icon();
             config.callback.fail(xhr);
             config.callback.always(Hm_Utils.json_decode(xhr.response, true));
         });
         xhr.addEventListener('abort', function() {
-            Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id);
+            Hm_Ajax.stop_loading_icon();
             config.callback.always(Hm_Utils.json_decode(xhr.response, true));
 
         });
+        xhr.addEventListener('loadend',function () {
+            Hm_Ajax.stop_loading_icon();
+        });
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xhr.setRequestHeader('X-Requested-with', 'xmlhttprequest');
         xhr.send(data);
@@ -206,7 +208,7 @@ var Hm_Ajax_Request = function() { return {
         return res.join('&');
     },
 
-    make_request: function(args, callback, extra, request_name, on_failure, batch_callback) {
+    make_request: function(args, callback, extra, request_name, on_failure, batch_callback, on_loading) {
         var name;
         var arg;
         this.batch_callback = batch_callback;
@@ -232,7 +234,7 @@ var Hm_Ajax_Request = function() { return {
         }
         var dt = new Date();
         this.start_time = dt.getTime();
-        this.xhr_fetch({url: '', data: args, callback: this});
+        this.xhr_fetch({url: '', data: args, callback: this},on_loading);
         return false;
     },
 
@@ -297,7 +299,7 @@ var Hm_Ajax_Request = function() { return {
         if (this.batch_callback) {
             if (typeof Hm_Ajax.batch_callbacks[this.batch_callback.toString()] != 'undefined') {
                 batch_count = --Hm_Ajax.batch_callbacks[this.batch_callback.toString()];
-            }
+           }
         }
         Hm_Message_List.set_row_events();
         if (batch_count === 0) {
@@ -306,11 +308,11 @@ var Hm_Ajax_Request = function() { return {
             Hm_Ajax.p_callbacks = [];
             this.batch_callback(res);
             this.batch_callback = false;
-            Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id);
+            Hm_Ajax.stop_loading_icon(); 
             $('body').removeClass('wait');
         }
         if (Hm_Ajax.active_reqs == 0) {
-            Hm_Ajax.stop_loading_icon(Hm_Ajax.icon_loading_id);
+            Hm_Ajax.stop_loading_icon();
             $('body').removeClass('wait');
         }
         res = null;
@@ -1321,7 +1323,9 @@ var Hm_Folders = {
             $('.search_terms').val(hm_search_terms());
         }
         $('.search_terms').on('search', function() {
-            Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_reset_search'}]);
+            Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_reset_search'}],function () {
+
+            },[],true);
         });
     },
 
@@ -1673,7 +1677,7 @@ var Hm_Utils = {
         $('.offline').hide();
         Hm_Ajax.request(
             [{'name': 'hm_ajax_hook', 'value': 'ajax_test'}],
-            false, [], false, false, false);
+            false, [], true, false, false);
     },
 
     is_element_visible: function (elem) {
@@ -2535,7 +2539,7 @@ function getServiceDetails(providerKey){
                 }
             },
             [],
-            false
+            true
         );
     }
 }

modules/feeds/site.js

@@ -7,7 +7,8 @@ var feed_test_action = function(event) {
     Hm_Ajax.request(
         form.serializeArray(),
         function() {},
-        {'feed_connect': 1}
+        {'feed_connect': 1},
+        true
     );
 };
 
@@ -40,7 +41,7 @@ var feeds_search_page_content = function(id) {
             {'name': 'feed_server_ids', 'value': id}],
             display_feeds_search_result,
             [],
-            false,
+            true,
             Hm_Message_List.set_search_state
         );
     }

modules/github/site.js

@@ -16,7 +16,7 @@ var load_github_data = function(id) {
 };
 
 var load_github_data_background = function(id) {
-        Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_github_data'}, {'name': 'github_unread', 'value': 1}, {'name': 'github_repo', 'value': id}], display_github_data_background);
+        Hm_Ajax.request([{'name': 'hm_ajax_hook', 'value': 'ajax_github_data'}, {'name': 'github_unread', 'value': 1}, {'name': 'github_repo', 'value': id}], display_github_data_background,[],true);
 };
 
 var display_github_data_background = function(res) {

modules/imap/site.js

@@ -37,7 +37,7 @@ var imap_hide_action = function(form, server_id, hide) {
                 $('.hide_imap_connection', form).show();
             }
             Hm_Folders.reload_folders(true);
-        }
+        },[],true
     );
 };
 
@@ -110,7 +110,8 @@ var imap_test_action = function(event) {
     Hm_Ajax.request(
         form.serializeArray(),
         false,
-        {'imap_connect': 1}
+        {'imap_connect': 1},
+        true
     );
 }
 
@@ -1037,7 +1038,7 @@ var imap_background_unread_content = function(id, folder) {
         {'name': 'imap_server_ids', 'value': id}],
         imap_background_unread_content_result,
         [],
-        false,
+        true,
         function() {
             var cache = $('<tbody></tbody>').append($(Hm_Utils.get_from_local_storage('formatted_unread_data')));
             Hm_Message_List.adjust_unread_total($('tr', cache).length, true);

modules/nasa/site.js

@@ -20,7 +20,9 @@ var nasa_connect = function(event) {
         Hm_Ajax.request(
             [{'name': 'hm_ajax_hook', 'value': 'ajax_nasa_connect'},
             {'name': 'api_key', 'value': key}],
-            nasa_connect_result
+            nasa_connect_result,
+            [],
+            true
         );
     }
     return false;

modules/nux/site.js

@@ -54,7 +54,9 @@ var display_final_nux_step = function(res) {
                 {'name': 'imap_service_name', value: res.nux_service_name}],
                 function () {
                     Hm_Utils.redirect();
-                }
+                },
+                [],
+                true
             );
         } else {
             Hm_Utils.redirect();

modules/saved_searches/site.js

@@ -25,7 +25,7 @@ var delete_search = function(event) {
         Hm_Ajax.request(
             [{'name': 'hm_ajax_hook', 'value': 'ajax_delete_search'},
             {'name': 'search_name', 'value': name}],
-            search_delete_results
+            search_delete_results,[],true
         );
     }
     return false;
@@ -55,7 +55,7 @@ var update_save_search_label = function(event) {
             {'name': 'search_terms_label', 'value': $('.search_terms_label').val()},
             {'name': 'old_search_terms_label', 'value': $('.old_search_terms_label').val()},
             {'name': 'search_name', 'value': $('.search_terms').val()}],
-            update_save_search_label_results
+            update_save_search_label_results, [], true
         );
     }
     return false;