New functions to activate and deactivate the Loading... modal
authorArt Cancro <ajc@citadel.org>
Wed, 15 Dec 2021 05:03:15 +0000 (00:03 -0500)
committerArt Cancro <ajc@citadel.org>
Wed, 15 Dec 2021 05:03:15 +0000 (00:03 -0500)
webcit-ng/static/index.html
webcit-ng/static/js/main.js
webcit-ng/static/js/view_forum.js

index 741805247328995a8ab5de1d6f61ebe2abb2b346..5e02bb2d969b1ef99a2ef36c265991683ed1635b 100644 (file)
 
 <body class="w3-light-grey">
 
+<!-- Modal dialog (when needed) -->
+<div id="ctdl_big_modal" class="w3-modal" style="display:none; z-index:5">
+       <div class="w3-modal-content">
+               <div id="ctdl_big_modal_content" class="w3-container">
+                       <p>Loading...</p>
+               </div>
+       </div>
+</div>
+
 <!-- Top container -->
 <div id="navbar" class="w3-bar w3-top w3-black w3-large" style="z-index:4">
        <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
index 05d7fc40ba9475274796ca6bc2705086b0e5f0c3..e76c9f44f75aff393343d576fe0ca22e1ab78f1b 100644 (file)
@@ -193,3 +193,18 @@ function load_new_march_list() {
        }
        fetchm();
 }
+
+
+// Activate the "Loading..." modal
+function activate_loading_modal() {
+       document.getElementById("ctdl_big_modal_content").innerHTML =
+               "<i class=\"fas fa-spinner fa-spin\"></i>&nbsp;&nbsp;"
+               + _("Loading messages from server, please wait");
+       document.getElementById("ctdl_big_modal").style.display = "block";
+}
+
+
+// Disappear the "Loading..." modal
+function deactivate_loading_modal() {
+       document.getElementById("ctdl_big_modal").style.display = "none";
+}
index 3d913605ff4e1b041d2dcecebdaad5514d963f93..0aadaf8200b6a65c2d021c5b24d48900641e2616 100644 (file)
@@ -15,9 +15,7 @@
 function forum_readmessages(target_div_name, gt_msg, lt_msg) {
        target_div = document.getElementById(target_div_name);
        original_text = target_div.innerHTML;                                   // in case we need to replace it after an error
-       target_div.innerHTML = 
-               "<div class=\"ctdl-forum-nav\"><i class=\"fas fa-spinner fa-spin\"></i>&nbsp;&nbsp;"
-               + _("Loading messages from server, please wait") + "</div>";
+       target_div.innerHTML = ""
 
        if (lt_msg < 9999999999) {
                url = "/ctdl/r/" + escapeHTMLURI(current_room) + "/msgs.lt|" + lt_msg;
@@ -123,7 +121,9 @@ function forum_render_messages(message_numbers, msgs_div_name, scroll_to) {
        // Here is the async function that waits for all the messages to be loaded, and then renders them.
        fetch_msg_list = async() => {
                document.body.style.cursor = "wait";
+               activate_loading_modal();
                await Promise.all(msg_promises);
+               deactivate_loading_modal();
                document.body.style.cursor = "default";
                
                // At this point all of the Promises are resolved and we can render.