Loading Indicator Page Full Refresh in XPages

Question

One of my XPages there are mo many design elements. The page takes time to load more than expected according to connection speed. I would like to create an indicator to show the

Answer 1

How you do this will not be XPages-specific. It's important to understand the order of events.

1. User clicks link somewhere to open page
2. Browser sends request to server
3. Server receives request and loads component tree for page server-side
4. Server runs beforePageLoad, afterPageLoad, beforeRenderResponse events
5. Server generates HTML to send to the browser
6. Server runs afterRenderResponse event
7. Server passes resulting HTML to the screen
8. Browser receives response from server

So adding anything to the XPage that is the target of the browser request at step 2 cannot have an effect. You need to do something client-side at step 1, before the request is sent to the browser. If you think about how you did it for the partial refresh and what's happening, again it's running CSJS before triggering the partial refresh, the same process.

If users are coming externally, the only option is to send them to a redirect web page first, render that, and continue programmatically running step 1.

Answer 2

I've not yet made a dedicated NotesIn9 show for it yet, but I do a demo of a technique in this TLCC webinar.
https://www.youtube.com/watch?v=jBaRSM9Ng_o&index=3&list=PL9nOJ-QrsuFa00dOsdE6EDh_l2fkiYD0D The relevant part starts around the 26 minute part.

I'm doing this on loading the page initial but I'm sure could be adapted for a full refresh if you were already on the page.

The basic concept is on page load you don't actually load any long running data. You just sent the shell of the page and then in the onClientLoad event you trigger a partial refresh.

<xp:this.resources>
    <xp:script src="/xpUtilities.jss" clientSide="false"></xp:script>
    <xp:dojoModule name="extlib.dijit.ExtLib"></xp:dojoModule>
    <xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
    <xp:styleSheet href="/app.css"></xp:styleSheet>
</xp:this.resources>
Page 1


<xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.put("vsHasData", false);}]]></xp:this.beforePageLoad>
&#160;&#160;-&#160;&#160;Header UI goes here....<xp:br></xp:br>
<xp:br></xp:br>

<xp:br></xp:br>

<xp:panel id="MainContentWrapper">
<xp:panel id="MainContent">

    <xp:this.rendered><![CDATA[#{javascript:return viewScope.get("vsHasData");}]]></xp:this.rendered>
    <xp:br></xp:br>

    <xp:repeat id="repeat1" rows="100" var="rowData"
        indexVar="rowIdx">
        <xp:this.value><![CDATA[#{javascript:viewScope.get("vsStateMap").keySet()}]]></xp:this.value>
        <xp:text escape="true" id="computedField2"
            value="#{rowData}">
        </xp:text>
        -
        <xp:text escape="true" id="computedField3">
            <xp:this.value><![CDATA[#{javascript:viewScope.get("vsStateMap").get(rowData)}]]></xp:this.value>
            <xp:this.converter>
                <xp:convertNumber type="number"
                    integerOnly="true">
                </xp:convertNumber>
            </xp:this.converter>
        </xp:text>
        <xp:br></xp:br>
    </xp:repeat>
    <xp:br></xp:br>
    <xp:br></xp:br>
</xp:panel>
</xp:panel>
<xp:eventHandler event="onClientLoad" submit="true" refreshMode="partial" refreshId="MainContentWrapper">
    <xp:this.action><![CDATA[#{javascript:return getStateTotals();}]]></xp:this.action>
    <xp:this.onStart><![CDATA[XSP.startAjaxLoading("Calculating State Totals. This may take a few moments.")]]></xp:this.onStart>
    <xp:this.onComplete><![CDATA[XSP.endAjaxLoading()]]></xp:this.onComplete>
    <xp:this.onError><![CDATA[XSP.endAjaxLoading()]]></xp:this.onError>
</xp:eventHandler>

That's a demo page. The stuff to look at is for dojo resources that are added, the fact that I start off hiding the "MainContent" vie a scoped variable and then the end onClientLoad bit.

So the page loads, but the data to generate the repeat control does NOT run because it's in a non rendered panel. So the users get to the page instantly. Then the onClientLoad kicks - on Start it shows a "Please Wait" kind of thing then runs the function to get the data. When the data is completed, I set a scopedVariable to then show the mainContent area and the endAjaxLoading stuff then triggers and everything gets displayed.