Saturday, July 24, 2021

Hiding spinning icon in APEX 21.1 Modal Dialog

An AOP customer wrote us that when opening a PDF in a Modal Dialog the spinning icon didn't disappear automatically anymore in Oracle APEX 21.1, whereas it did before.  

I created a use case but saw it not only affects the AOP process but any file you want to open in the Modal Dialog. With previous versions of APEX, this didn't happen, but with APEX 21.1 the Modal Dialog keeps showing the spinning icon.

Here's an animated gif that shows the use case:
I created two use cases; both buttons redirect to a modal page in the app.

On the modal page behind the "View File" button, there's a before header process which gets a BLOB (PDF) from the database and displays it inline.

On the modal page behind the "AOP Modal" button, there's a before header AOP process which generates a PDF of a classic report on the fly.

To work around the issue, I added a dynamic action on the page where the buttons are defined; on click of the button, it will execute the following JavaScript code:

  $('.ui-dialog--apex.t-Dialog-page--standard .ui-dialog-content').addClass('js-dialogReady');    
}, 2000);

After waiting 2000 milliseconds (2 seconds) it will add the js-dialogReady CSS class, which tells the icon to hide.

Hope it will help you in case you need to remove the spinning icon from your modal dialog.