Our app's loading process is quite lengthy, so to keep the user informed that the app is indeed working and just needs time to load, we decided to implement a loading/initializing indicator. I initially attempted to use WL's busy indicator but found that it isn't fully available right at the start of the app's lifecycle. Instead, I opted to create a simple DIV within our single-page application to show the loading indication. When the app finishes loading, I hide the indicator. This method works well during the first run of the app, but subsequent runs exhibit different behavior.
First Run: The indicator appears immediately and disappears once the initialization is complete.
Subsequent runs: Initially, the indicator doesn't appear with the first presentation and only briefly flashes before the app finishes initializing and begins normal operation.
The loading DIV (I made this completely static without relying on any JS or CSS):
<div id="loadingInd"
style="z-index:1;position:absolute;left:85px;top:185px;display:block;">
Loading2...
</div>
Hiding code:
$('#loadingInd').hide()
A bit about the loading process:
We preload all necessary JS and HTML files for the application. There are plans to switch to a more lazy loading process, but it's not high enough priority yet to be implemented. Once all files are loaded, we display UI elements such as menus and login buttons. Until everything is loaded, we have a loading splashscreen with the loadingInd DIV as static content. It's strange how the div shows up immediately during the initial run but delays appearing in subsequent runs. I suspect the flashing effect may be due to its timing with the call to hide(). Could there be something causing this discrepancy in drawing behavior during subsequent runs? I've checked the CSS information multiple times throughout the initialization process and everything seems consistent between the first and subsequent runs.
After some discussion here, I am going to give the busyIndicator another try. I will display it just before loading all content and hide it when it's time to load widgets. It seems to behave similarly to the DIV above. Perhaps there is an underlying issue related to drawing processes.