How do I show a loading div when opening a modal dialog from a CustomAction?

Question

I have created a new CustomAction which is a new item (link) in Site Actions menu. When you click it, it opens a modal page (aspx). Everything works fine, but it takes about 3 seconds to open the Modal page.

What I want to do is show a "loading" div while it opens the Modal page which will disappear when the page has been loaded completely. My code is as follows:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="SitePageModule" Url="SitePages" Path="SitePageModule">
    <File Url="CreateWorkspace.aspx" Name="workspace.aspx" Type="Ghostable" />
</Module>
  <CustomAction Description="create new workspace"
            GroupId="SiteActions"
            Id="SiteActionSkapYta"
            ImageUrl="/_layouts/images/newweb32.png"
            Location="Microsoft.SharePoint.StandardMenu"
            Sequence="1000"
            Title="create new space">
    <UrlAction Url="javascript:OpenPopUpPageWithTitle('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, 965, 570,'create')"/>
  </CustomAction>
</Elements>

Answer 1

You can use one of the following methods: SP.UI.ModalDialog.showWaitScreenSize or SP.UI.ModalDialog.showWaitScreenWithNoClose. Example:

waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading...", "Please wait while data is retrieved...", 60, 280);
--------wait for something--------
waitDialog.close(SP.UI.DialogResult.OK);  

Check out all methods for dialog class here

Complete code will look something like this: (see update)

<UrlAction Url="javascript:OpenPopUpPageWithWaitScreen('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, 965, 570,'create')"/> 

......

function OpenPopUpPageWithWaitScreen(url, callback, w, h, title){
   //this line will attach waitDialog variable to window object
   waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading...", "Please wait while data is retrieved...", 60, 280);
  OpenPopUpPageWithTitle(url, callback, w, h, title);
}

In your page you also need some javascript, to close wait screen when page loads:

ExecuteOrDelayUntilScriptLoaded(CloseWaitScreen, "sp.ui.dialog.js");
function CloseWaitScreen(){
  window.parent.waitDialog.close(SP.UI.DialogResult.OK);  
}

I haven't tested it, but if you have some troubles, I try to help.

UPDATE
Above code will not work, because I digged deeper in SP.UI.Dialog.debug.js and found how wait screen working for out of the box sharepoint functionality. For example when we push new item button on some list, there is a wait screen (sometimes) appears, then modal window opens. All magic in this piece of code:

if (this.get_$10_0() && this.$0_0) {
            window.setTimeout(Function.createDelegate(this, function() {ULSTYE:;
                if (!this.$1i_0 && !this.$p_0) {
                    this.$M_0 = SP.UI.ModalDialog.$2O();
                }
            }), 1000); 

Shortly, this code do the following: if width and height for modal dialog is not specified and modal dialog displays some url in iframe(if (this.get_$10_0() && this.$0_0)), then setup timer (which will trigger after 1sec). After 1sec, if iframe not loaded (script track when iframe loaded by listening onload event - this line attaches to load event - $addHandler(this.$0_0, 'load', this.$1O);), so if iframe after 1sec not loaded wait screen will be shown (this.$M_0 = SP.UI.ModalDialog.$2O();) this.$M_0 store reference to this wait screen, and it will be automatically closed when onload event for iframe will be fired.

Conclusion: if you want to show wait screen, you need pass null instead of width and height (or not to initialize this parameters, if you are using dialog options object):

<UrlAction Url="javascript:OpenPopUpPageWithTitle('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, null, null,'create')"/>

Doing this wait screen will be automatically open after 1sec if your page hasn't been loaded yet (I've tested, its working). Width and height for dialog will be calculated by script and will be fit width and height of content.
Why so weired at first glance behavior? Because if we specify width and height for dialog, it will be immediately open, and the content start loading, so you can't see you wait screen, because in front of the page will be your dialog with actual width and height (this is design of modal dialog class).
Ok, if I want to set width and height, but want also to see wait dialog? Bad news, it will be rather complicated. You need to pass null as width and height for dialog, then attach to onload event for your iframe (as dialog class do it), then when onload fires you need change size of iframe using script.