Update loader to use modal dialog overlay

This commit is contained in:
Wolfsblvt 2024-06-30 19:45:42 +02:00
parent 241876be83
commit aff4138263
2 changed files with 26 additions and 5 deletions

View File

@ -1,4 +1,4 @@
#loader, #preloader { #preloader {
position: fixed; position: fixed;
margin: 0; margin: 0;
padding: 0; padding: 0;

View File

@ -1,19 +1,39 @@
import { POPUP_RESULT, POPUP_TYPE, Popup } from './popup.js';
const ELEMENT_ID = 'loader'; const ELEMENT_ID = 'loader';
/** @type {Popup} */
let loaderPopup;
export function showLoader() { export function showLoader() {
const container = $('<div></div>').attr('id', ELEMENT_ID); // Two loaders don't make sense
const loader = $('<div></div>').attr('id', 'load-spinner').addClass('fa-solid fa-gear fa-spin fa-3x'); if (loaderPopup) loaderPopup.complete(POPUP_RESULT.CANCELLED);
container.append(loader);
$('body').append(container); loaderPopup = new Popup(`
<div id="loader">
<div id="load-spinner" class="fa-solid fa-gear fa-spin fa-3x"></div>
</div>`, POPUP_TYPE.DISPLAY, null, { transparent: true });
// No close button, loaders are not closable
loaderPopup.closeButton.style.display = 'none';
loaderPopup.show();
} }
export async function hideLoader() { export async function hideLoader() {
if (!loaderPopup) {
console.warn('There is no loader showing to hide');
return;
}
//Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same. //Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
$('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () { $('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
$(`#${ELEMENT_ID}`) $(`#${ELEMENT_ID}`)
//only fade out the spinner and replace with login screen //only fade out the spinner and replace with login screen
.animate({ opacity: 0 }, 300, function () { .animate({ opacity: 0 }, 300, function () {
$(`#${ELEMENT_ID}`).remove(); $(`#${ELEMENT_ID}`).remove();
loaderPopup.complete(POPUP_RESULT.AFFIRMATIVE);
loaderPopup = null;
}); });
}); });
@ -22,4 +42,5 @@ export async function hideLoader() {
'filter': 'blur(15px)', 'filter': 'blur(15px)',
'opacity': '0', 'opacity': '0',
}); });
} }