display processing page on ui untl data is not fetched

3676818

I am using ajax call to retrieve data from server, it takes few seconds for data to come at front end and get populated, as the data is getting retrieved i want to display a processing page. I was going through cookbook - https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pullToRefresh&demo=basicPullToRefresh, but at the top it is mentioned that it only works for touch enabled devices and it is using oj collections and i am not doing so. I have also taken a look at https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=progress&demo=loading and this also doesn't seem to meet the need. Is there any other way. Does ojet provide us with the functionality to display a process page or some sort of loading gesture on whole page as data is getting retrieved?

Or i am wrong somewhere and using above listed links we can achieve the needed?

Duncan Mills-Oracle

The standard technique for handling this is very simple.

1. You create a flag observable that is initially false and which you will set to true when your AJAX call returns

2. In the UI you use a couple of <oj-bind-if> statements to either display a loading image or the results depending on the state of that variable.  Because the UI will be automatically be refreshed when the flag variable changes this would initially show the loading view and then switch to display the data as soon as it's ready.

So for example you might have something like this:

<oj-bind-if test="[[dataLoaded()===false]]">

   <img src="/images/spinner.gif">

</oj-bind-if>

<oj-bind-if test="[[dataLoaded()===true]]">

   <oj-table ....>

   </oj-table>

</oj-bind-if>