Waiting icon / message in xpages

I want to use some waiting dialog / icon / image when code is running. Once code is finished want to stop that icon. I have gone through material available on web but failed to get or understand.

I am using SSJS script which calls agent at back end. It tooks 20-30 seconds in processing.

I have gone through but don't know the utilization?

https://openntf.org/XSnippets.nsf/snippet.xsp?id=bootstrap-standby-dialog

http://xpagesera.blogspot.com/2012/05/add-ajax-loading-control-in-xpages-for.html

http://lotusnotus.com/lotusnotus_en.nsf/dx/xpages-tip-a-modal-waiting-dialog-for-background-processes..htm

I have tried the following It's working fine with browsers for IBM Notes 9.0.1 but not working in XPiNC. Where I am using One UI V 2.1 its not working in XPiNC or in Web Client.

   <xp:this.resources>
        <xp:dojoModule name="extlib.dijit.ExtLib"></xp:dojoModule>
        <xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
   </xp:this.resources>

In event handler I have used following events on my page with partial refresh.

   <xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
   <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
   <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>

How can I achieve this function by using this code on both clients and on One UI 2.1.

I really appreciate your responses received on my initial question and do expect the same.

Best Regards, Qaiser Abbas

Solution

Here is an example XPage for your second link Add AJAX “Loading..” control in XPages for Partial Updates:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="margin:200px">
    <xp:this.resources>
        <xp:dojoModule name="extlib.dijit.Loading" />
    </xp:this.resources>
    <xp:button id="button1" value="Show time in 3 seconds">
        <xp:eventHandler
            event="onclick"
            submit="true"
            refreshMode="partial"
            refreshId="panel1">
            <xp:this.action><![CDATA[#{javascript:
                viewScope.clickTime = new Date();
                var waitUntil = viewScope.clickTime.getTime() + 3000; 
                while(waitUntil > new Date().getTime()) {
                    // wait 3 seconds
                }
            }]]></xp:this.action>
            <xp:this.onStart><![CDATA[XSP.startAjaxLoading()]]></xp:this.onStart>
            <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
            <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>
        </xp:eventHandler>
    </xp:button>
    <xp:panel id="panel1">
        <xp:text
            escape="true"
            id="computedField1"
            value="#{viewScope.clickTime}"
            style="font-size:48pt">
            <xp:this.converter>
                <xp:convertDateTime type="both" />
            </xp:this.converter>
        </xp:text>
    </xp:panel>
</xp:view>

When you click the button it shows "Please wait..." for three seconds and then the time of button click.

Make sure you set refreshMode="partial" in your button's eventHandler and a valid refreshId.