Modal loading GIF for Interactive Reports

(My first blog!)

Interactive Reports are the APEX's slice of Web 2.0 and provide a huge amount of out-of-the-box functionality.

The reports make extensive use of AJAX calls -an action on the page calls the database to get some data which is then processed and used to update some element of the screen, all without ever issuing a page submit.

I've found (or rather the impatient application users have discovered) that problems can occur with a slow running report if multiple actions are selected in quick succession.  The AJAX wires appear to get crossed.

Misplaced JSON

(in Demo, select 'Table Name' header, select 'Actions' button, select 'Filter' option)

Javascript errors

(in Demo, select 'Actions' button, select 'Filter' option, enter text in search box and select 'Go')

I logged an SR with Oracle Support and bug 14299369 has been raised. 

Workaround

While the APEX development team are beaving away on a fix, I thought I'd share an easy workaround.

While the AJAX is running, APEX displays an animated loading GIF.  The image is stored in a <span id="apexir_LOADER"> element which is toggled on and off either side of the AJAX call to give the 'loading' effect.

The following CSS changes the <span> element to make it fill the screen and to be partially transparent.  The effect is to fade the screen and GIF and to prevent access to any of the Interactive Report actions.  Thus creating a modal loading GIF.

 #apexir_LOADER {
  background: none repeat scroll 0 0 #FFFFFF;
  height: 100%;
  left: 0px;
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE8 */
  top: 0px;
  width: 100%;
  z-index: 999;
 }

 #apexir_LOADER img {
  left: 48%;
  opacity: 1.0;
  position: relative;
  top: 50px;
 }

Demo

Here's a demo  (credentials = demo/demo)