在完全加载之前，页面加载栏隐藏在jsf中

Question

Actually I am getting loading bar but before page content get loaded loading bar is hided. I want loading bar until page is not loaded correctly.

Below code I have used in layout.xhtml

 <li class="#{loginBean.subMenu eq 'Booking_History' ? 'active' : ''}">
          <p:commandLink rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History"
                        immediate="true">
                        </p:commandLink>

java method

public String showList() {
    startLoadingBar();
    status="All";
    noOfRecords=0;
    getList();
    searchBookingHistory();
    log.info("Loaded successfully");
    return "/pages/internalstackholders/bookinghistory.jsf?faces-redirect=true";
}

In bookinghistory.xhtml

 <p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
        showEffect="fade" showHeader="false" closable="false" width="250"
        resizable="false">
    <h:form>
      <center>
        <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
        <b>Please wait...</b><br />
        <br />
      </center>
    </h:form>
  </p:dialog>

Any body having any suggestion.

Answer 1

You can try with below code it works for me onclick="statusDialog.start()" and oncomplete="statusDialog.close()"

    <p:commandButton rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History" immediate="true" async="true" onclick="statusDialog.start()" oncomplete="statusDialog.close()" />

<p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
    showEffect="fade" showHeader="false" closable="false" width="250"
    resizable="false">
<h:form>
  <center>
    <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
    <b>Please wait...</b><br />
    <br />
  </center>
</h:form>

Answer 2

I have found my answer..

In layout.xhtml I have added below code inside body.

<div id="nonAjaxLoad">
    <img src="#{request.contextPath}/resources/images/loading.gif"/>
</div>

Then I have added script code.

<script>
$(document).ready(function(){
    console.log("ready is called");
    //PF('statusDialog').hide()
    $('#nonAjaxLoad').hide();
});

$(window).bind('beforeunload', function() {
     console.log("bind is called");
    // PF('statusDialog').show()
    $('#nonAjaxLoad').show(); 
});
</script>

And I have added in css

#nonAjaxLoad {
width: 50px;
height: 50px;
position:absolute;
bottom: 50%;
right: 50%;
z-index: 999
}

Now loading bar is working correctly. I took help from here .