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

… some messages are shown
cypht-org · Aug 2, 2024 · 4a28fb4 · 4a28fb4
1 parent c008f27
commit 4a28fb4
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 57 deletions.
diff --git a/modules/core/output_modules.php b/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_bar"></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>';
     }
 }
 

diff --git a/modules/core/site.css b/modules/core/site.css
@@ -239,7 +239,7 @@ td {
 .placeholder {
   width: 100px !important;
 }
-.loading_icon {
+.loading_bar {
   background-position: 0px 0px;
   background: transparent
     url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAKCAYAAAD2Fg1xAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkbBRUr8yq4rwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACASURBVDjL7c/BCsQwCEXRm0STfm+/PjVVZ9XCrGc35MFDcSGccp5nrrVwd9ydiCAzeVJrpdZKaw0RQVVRVXrvjDE4juOdz/60946qIiKICK219x9AKYXMJDOJCCICd+e+b9ZamBlmxnVdb+eczDm/bmZG5U+yIRuyIRuyIRvySz7mT0d4m0OV2gAAAABJRU5ErkJggg==")
@@ -255,6 +255,20 @@ 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;
+}
+
 .logout {
   margin: 2px;
   margin-left: 5px;

diff --git a/modules/core/site.js b/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;
@@ -1673,7 +1675,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) {

diff --git a/modules/feeds/site.js b/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
     );
 };
 

diff --git a/modules/imap/site.js b/modules/imap/site.js
@@ -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);

diff --git a/modules/smtp/site.js b/modules/smtp/site.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var get_smtp_profile = function(profile_value) {
+var get_smtp_profile = function(profile_value, on_loading=true) {
     if (typeof profile_value === "undefined" || profile_value == "0" || profile_value == "") {
         Hm_Notices.show([err_msg('Please create a profile for saving sent messages option')]);
     }
@@ -9,7 +9,8 @@ var get_smtp_profile = function(profile_value) {
             [{'name': 'hm_ajax_hook', 'value': 'ajax_profiles_status'},
             {'name': 'profile_value', 'value': profile_value}],
             function(res) {
-            }
+            },
+            [], on_loading
         );
     }
 };
@@ -18,18 +19,19 @@ var check_attachment_dir_access = function() {
     Hm_Notices.show([err_msg('Attachment storage unavailable, please contact your site administrator')]);
 };
 
-var smtp_test_action = function(event) {
+var smtp_test_action = function(event, on_loading = true) {
     event.preventDefault();
     var form = $(this).closest('.smtp_connect');
     Hm_Notices.hide(true);
     Hm_Ajax.request(
         form.serializeArray(),
         false,
-        {'smtp_connect': 1}
+        {'smtp_connect': 1},
+        on_loading
     );
 };
 
-var smtp_save_action = function(event) {
+var smtp_save_action = function(event, on_loading = true) {
     event.preventDefault();
     var form = $(this).closest('.smtp_connect');
     var btnContainer = $(this).parent();
@@ -48,11 +50,12 @@ var smtp_save_action = function(event) {
                 Hm_Folders.reload_folders(true);
             }
         },
-        {'smtp_save': 1}
+        {'smtp_save': 1},
+        on_loading
     );
 };
 
-var smtp_forget_action = function(event) {
+var smtp_forget_action = function(event, on_loading = true) {
     event.preventDefault();
     var form = $(this).closest('.smtp_connect');
     var btnContainer = $(this).parent();
@@ -70,11 +73,12 @@ var smtp_forget_action = function(event) {
                 Hm_Folders.reload_folders(true);
             }
         },
-        {'smtp_forget': 1}
+        {'smtp_forget': 1},
+        on_loading
     );
 };
 
-var smtp_delete_action = function(event) {
+var smtp_delete_action = function(event,on_loading = true) {
     if (!hm_delete_prompt()) {
         return false;
     }
@@ -91,11 +95,12 @@ var smtp_delete_action = function(event) {
                 decrease_servers('smtp');
             }
         },
-        {'smtp_delete': 1}
+        {'smtp_delete': 1},
+        on_loading
     );
 };
 
-var smtp_delete_draft = function(id) {
+var smtp_delete_draft = function(i,on_loading = true) {
     Hm_Ajax.request(
         [{'name': 'hm_ajax_hook', 'value': 'ajax_smtp_delete_draft'},
         {'name': 'draft_id', 'value': id}],
@@ -104,7 +109,7 @@ var smtp_delete_draft = function(id) {
                 $('.draft_'+id).remove();
                 $('.draft_list').toggle();
             }
-        }
+        }, [], on_loading
     );
 };
 
@@ -113,11 +118,7 @@ var send_archive = function() {
     document.getElementsByClassName("smtp_send_placeholder")[0].click();
 }
 
-var save_compose_state = function(no_files, notice) {
-    var no_icon = true;
-    if (notice) {
-        no_icon = false;
-    }
+var save_compose_state = function(no_files, notice, on_loading = true) {
     var uploaded_files = $("input[name='uploaded_files[]']").map(function(){return $(this).val();}).get();
     var body = $('.compose_body').val();
     var subject = $('.compose_subject').val();
@@ -163,7 +164,7 @@ var save_compose_state = function(no_files, notice) {
             }
         },
         [],
-        no_icon
+        on_loading
     );
 };
 
@@ -384,7 +385,10 @@ var is_valid_recipient = function(recipient) {
     return recipient.match(valid_regex);
 };
 
-var process_compose_form = function(){
+var process_compose_form = function(on_loading = true){
+    if (!on_loading) {
+        Hm_Ajax.show_loading_icon(); 
+    }
     var msg_uid = hm_msg_uid();
     var detail = Hm_Utils.parse_folder_path(hm_list_path(), 'imap');
     var class_name = 'imap_' + detail.server_id + '_' + msg_uid + '_' + detail.folder;
@@ -393,11 +397,10 @@ var process_compose_form = function(){
 
     if (next_message) {
         $('.compose_next_email_data').val(next_message);
-    }
+    }   
 
     var uploaded_files = $("input[name='uploaded_files[]']").map(function () { return $(this).val(); }).get();
     $('#send_uploaded_files').val(uploaded_files);
-    Hm_Ajax.show_loading_icon();
     $('.smtp_send_placeholder').addClass('disabled_input');
     $('.smtp_send_archive').addClass('disabled_input');
     $('.smtp_send').on("click", function () { return false; });
@@ -431,7 +434,7 @@ $(function () {
                 function(res) {
 
                 },
-                []
+                [], true
             );
         });
     }
@@ -561,7 +564,7 @@ $(function () {
             }
         });
         $('.compose_form').on('submit', function() {
-            process_compose_form();
+            process_compose_form(false);
         });
         if ($('.compose_cc').val() || $('.compose_bcc').val()) {
             toggle_recip_flds();