APEX-AT-WORK no image

UILayout: Hide half loaded elements

Von Tobias Arnhold 2.14.2011
One of the problems of an layout extension is the initialization time.
Normally the UILayout needs a couple of seconds to initialize (1-3). Depending on your server connection, your client hardware and your browser (IE6 is slow, FF 3.6 is fast).

To show a similar loading frame like the ExtJS Loading Icon http://apex.oracle.com/pls/apex/f?p=65555:1 use this trick:

Add the following code to the beginning of your Page Template Body or add a new HTML region (No template) on page 0:

<div style="width: 100%; height: 100%; position: absolute; left: 0pt; top: 0pt; background-color: rgb(255, 255, 255); z-index: 4000; opacity: 0.8; display: block;" id="loadingBackground">
<div style="height: auto;left: 50%;position: absolute;top: 50%;text-align: center; color: #555555;font-size: 18px;font-family:Arial,Helvetica,Geneva,sans-serif;padding:8px;42px;"> ... Loading ... </div>
</div>


After the initialization of the UILaoyut plug-in use the LoadingIcon plug-in with the option "Stop LoadingIcon"

The initialization feels much smoother now.

Example: http://apex.oracle.com/pls/apex/f?p=AAW_PLUGINS:UILAYOUT_PLUGIN