Building enterprise level application often requires loading large amount of data. This process can take some time. To provide a quality experience end users expect loading screens. This informs the user that they are interacting with the application.

Using Primefaces and Bootstrap 3 javascript you can easily alert end users when the server is working on processing data.

Consider the case of an end user is searching a database for collection of cars. The database may contain N amount of cars. Therefore, we must assume the process could take up to several hundred milliseconds. This is perfect situation for a loading bar.

The modal

The modal is a standard Bootstrap 3 Modal and has a simple progress bar. In the footer there is a reloading link in case the ajax call fails to return a response from the server.

<div class="modal fade" id="pleaseWaitDailog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Processing</h4>
      </div>
      <div class="modal-body">
        <div class="progress">
           <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
              <span class="sr-only">99% Complete</span>
           </div>
        </div>
      </div>
      <div class="modal-footer">
        Stuck? <a href="javascript: window.location.reload()">try reloading...</a>
      </div>
    </div>
  </div>
</div>

Primefaces events

The commandLink component of primefaces offers many great features. The most useful for this senario is the onstart and onsucess event. Onstart executes a javascript method when the ajax request begins to the server, the oncomplete executes a method when the response of returned from the server. There is no guarantee that the response will come back, this is why the modal has the reloading link.

<p:commandLink id="search" action"#{myBean.doSearch}" update="searchResults" styleClass="btn btn-primary" onstart="$('#pleaseWaitDailog').modal('show');" onsuccess="$('#pleaseWaitDailog').modal('hide');">
   <i class="fa fa-search"></i> Search
</p:commandLink>

Using this commandLink, it will call the bootstrap modal library to show, then hide the processing modal defined above. This will give the end user a better interaction with the server.