Update loader to use modal dialog overlay

public/css/loader.css

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

public/scripts/loader.js

@@ -1,19 +1,39 @@
+import { POPUP_RESULT, POPUP_TYPE, Popup } from './popup.js';
+
 const ELEMENT_ID = 'loader';
 
+/** @type {Popup} */
+let loaderPopup;
+
 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() {
+    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.
     $('#load-spinner').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
         $(`#${ELEMENT_ID}`)
             //only fade out the spinner and replace with login screen
             .animate({ opacity: 0 }, 300, function () {
                 $(`#${ELEMENT_ID}`).remove();
+                loaderPopup.complete(POPUP_RESULT.AFFIRMATIVE);
+                loaderPopup = null;
             });
     });
 
@@ -22,4 +42,5 @@ export async function hideLoader() {
             'filter': 'blur(15px)',
             'opacity': '0',
         });
+
 }