Oracle JET: Programmatic control over the Page's Busy State

Please wait. Yes, don't got anywhere. The above message proves, always, to make the user wait and  do no action on the keyboard or mouse. And yes, the user waits, although for some time.

In our web application, the logic should be capable to show this message, conditionally. Once the condition has evaluated false, the actual content should get loaded. To achieve this we should always rely on the framework delivered functionality, and not to code by ourselves. All frameworks have it, and let us see how its done in Oracle JET

View: In the HTML lets add the below small piece, as a direct  child to body, above the actual content

<div id='busyDiv' class="oj-flex oj-sm-align-items-center oj-sm-justify-content-center" style="height:100vh;">

<div class="oj-flex-item" style="text-align:center;font-weight:bold;font-size:3em;">Please wait<p style="font-size:0.5em;">Loading...</p></div>

</div>

View Model: In the main.js, lets add the below script

Context.getPageContext().getBusyContext().whenReady()

.then(

(data) => $("#busyDiv").fadeOut(400))

.catch(err => {

$("#busyDiv").text("ERROR;Could not start the application"); console.log("ERROR ", err)

});

Context: This comes by loading/requiring the library in "require" ojs/ojContext and passing its respective object as a parameter in the function as function(Context,.....) 

getPageContext().getBusyContext(): This helps to get the busy state at the page level
The page is in a busy state when the components's DOM in the page is getting ready

whenReady(): This method is active once the pageContext() is no more busy. This is a Promise, which gets resolved after the page's state is changed from busy to active

As we can see, then() fades out the busy <div>
Incase there was an error, obviously its handled by catch()