Display page load progress bar...

Question

I have a page which takes about 50-60 secs to load and I want to display some kind of progress bar indicating to the user that the page is loading. This page is a pop up page with a report returning a lot of data. I searched the forum and most of the progress bar examples are related to a button click event. However I want the progress bar to display before the entire page has been loaded.
I really need to get this done fast and any kind of help or suggestion will be really appreciated.
Thanks!

Answer 1

Hi Carl,
I have a similar issue to the one 'user549354' listed.
The application in this case is single page application with a couple of report regions, one of which takes about a minute for the query to return the result.
The example listed below by you, and another one I have found by Vikas, both fire a javascript-redirect off a button... The related forum posts are:
Long running process/query
Re: Long running process/query
but if you want the processing page off the initial url, this is not possible.
Yes, you could workaround it by showing a button on the initial page which the user has to press to see the processing page ... but that is not an ideal solution.
I am not very familiar with javascript, and have tried the following alternatives unsuccessfully
1) Using a url to a different (intermediate) page (say page # 2) which has a display as text item that renders the animated gif image, with following source
Please wait...
<img src="/i/processing3.gif" />
in combination with different types of processes (on load/after regions/after footer) which redirect to my original page (say page #1) by doing the following
begin
htp.init;
owa_util.redirect_url('f?p=&APP_ID.:1:&SESSION.::&DEBUG.:1:::');
end;
This does not show the intermediate page at all, just waits until the actual page loads.
2) use the display as text item mentioned above, and in the region source (html region) using the following:
<META HTTP-EQUIV=Refresh CONTENT="2;URL=f?p=&APP_ID.:1">
The problem here is that the animated gif becomes de-animated after the the number of seconds set in the code, in the above case 2 seconds.
3) using the page header and footer javascript mentioned in the links off your post, and trying to fire it from a url type region using the following codce
javascript:html_Submit_Progress(this);
This fails with error – object does not exist – presumably because this needs to be fired off an item – wonder if it will work off a link.
4) Various other permutations and combinations of the above…
You have mentioned in your last post on this thread that an intermediate page could be called, that will fire the progress bar, and then redirect to the slow loading page.
This is seems to exactly what I am after – with the url of the intermediate page being the initial url with which to access the application.
The problem is that I do not know
a)     where or how to fire the relevant javascript [javascript:html_Submit_Progress(this);] from, besides a button press, and also
b)     how to (then and only then) re-direct to the slow loading page, so as to ensure that the animated gif is displayed… using any of pre-submit process (on load… after footer) prevents the page and the animated gif from rendering.
I am sure that this is very much possible… any help would be very much appreciated.
Thanks.
Alex.