Skip to content

Commit

Permalink
As part of, or after Bootstrap 5: Cypht: Add a spinner at least until…
Browse files Browse the repository at this point in the history 
… some messages are shown
  • Loading branch information
@David-Muhasa
David-Muhasa committed Jul 21, 2024
1 parent c008f27 commit 3228530
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 22 deletions.
8 changes: 7 additions & 1 deletion modules/core/output_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>';
}
}

Expand Down
16 changes: 15 additions & 1 deletion modules/core/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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==")
Expand All @@ -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;
Expand Down
44 changes: 24 additions & 20 deletions modules/core/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ var Hm_Ajax = {
return;
},

request: function(args, callback, extra, no_icon, batch_callback, on_failure) {
request: function(args, callback, extra, no_icon = false, batch_callback, on_failure) {
var bcb = false;
if (typeof batch_callback != 'undefined' && $.inArray(batch_callback, this.batch_callbacks) === -1) {
bcb = batch_callback.toString();
Expand All @@ -115,30 +115,27 @@ var Hm_Ajax = {
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);
},

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) {
Expand Down Expand Up @@ -179,20 +176,27 @@ var Hm_Ajax_Request = function() { return {
data = this.format_xhr_data(config.data);
}
xhr.open('POST', window.location.href)
Hm_Ajax.stop_loading_icon();
xhr.addEventListener('loadstart', function () {
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);
Expand Down Expand Up @@ -297,7 +301,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) {
Expand All @@ -306,11 +310,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;
Expand Down

0 comments on commit 3228530

Please sign in to comment.