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 Userview 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;
     }
   }

   CSS

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

   $(function(){
        
       $('#loadingDiv').click(function(){ $(this).hide()});
        
       //method1
       $('a, button').not("a.dropdown, button.buttonFontSize").click(function(){
           $('#loadingDiv').fadeIn();
       });
       $("form").on("submit", function(){
           $('#loadingDiv').fadeIn();
       });
   });
    
   //method2
   //$(window).on('beforeunload', function() {
   //    $('#loadingDiv').fadeIn   ();
   //});

   JavaScript

   Copy

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

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

   Markup

   Copy

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.