Show Loading Message On Page Navigation

Introduction

When users click on links or buttons that navigate away from the current page, a loading... message overlay shows up, which can improve their experience. This feature confirms that their action has been registered and helps prevent duplicate clicks.

How does it work?

By adding custom CSS, JavaScript, and HTML to your Joget application, you can create a loading overlay that appears whenever a link or button is clicked or a form is submitted. The overlay displays a message that disappears once the new page begins to load.

1. CSS: The CSS code defines the style of the overlay, including its position, size, background, and animation.
2. JavaScript: The JavaScript code detects clicks on links, buttons, and form submissions. It triggers the loading overlay to appear.
3. HTML: The HTML code creates the structure for the loading overlay that will display the message.

Implementation Steps

1. Go to UI Builder > Settings > Custom CSS and add the following code:

   #loadingDiv {
       display:none;
       position:fixed;
       width: 100%;
       height: 100%;
       min-height: 100%;
       padding-top: 20%;
       background: #ffffff73;
       opacity: 0.8;
       text-align: center;
       color: #4a3d3d;
       font-size: 30px;
        
   }
    
   #loadingDiv span{
       animation: blinker 2s linear infinite;
   }
    
   @keyframes blinker {
     50% {
       opacity: 0;
     }
   }

    
2. Next, go to UI Builder > Settings > Custom Javascript and add this script:

   $(function () {
   
       let loadingTimer;
       let minDisplayTime = 200; // adjust (300–800ms)
   
       function showLoading() {
           $('#loadingDiv').show();
   
           // record start time
           $('#loadingDiv').data("startTime", Date.now());
       }
   
       function hideLoading() {
           let startTime = $('#loadingDiv').data("startTime") || 0;
           let elapsed = Date.now() - startTime;
   
           // ensure minimum display time
           if (elapsed < minDisplayTime) {
               setTimeout(function () {
                   $('#loadingDiv').hide();
               }, minDisplayTime - elapsed);
           } else {
               $('#loadingDiv').hide();
           }
       }
   
       // AJAX hooks (Joget core)
       $(document).ajaxSend(function () {
           showLoading();
       });
   
       $(document).ajaxComplete(function () {
           hideLoading();
       });
   
   });

3.  Finally, add the following HTML code to UI Builder > Settings > Sub Header:

   <div id="loadingDiv"><span>loading...</span></div>

Expected outcome

Once you complete the steps, the loading overlay with a loading... message will appear whenever users click links, buttons, or submit forms. The overlay will disappear as the new page loads, giving users visual feedback that their action has been registered.

Download Sample App