title: Render blocks of page async with JSF + RichFaces
body: <p>I want to render 6 blocks on a page asynchronously using richfaces a4j support.
  To accomplish this I have defined 6 a4j:region components and an a4j:commandLink for manual refreshing of the components.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>&lt;ui:define name="body"&gt;
      &lt;h:form id="dashboardform"&gt;
       &lt;div class="table_container" style="width:99%"&gt;
          &lt;h:panelGrid id="dashboadPanel" columns="3"&gt;
  
              &lt;a4j:region id="resourceGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box"&gt;
                          &lt;ui:include src="dashboard_resourceGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
  
              &lt;a4j:region id="profileGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box" &gt;
                           &lt;ui:include src="dashboad_profileGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
  
              &lt;a4j:region id="reportGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box" &gt;
                          &lt;ui:include src="dashboard_reportGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
  
              &lt;a4j:region id="installedBaseGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box" &gt;
                          &lt;ui:include src="dashboard_installedBaseGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
  
              &lt;a4j:region id="simcardGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box"&gt;
                          &lt;ui:include src="dashboard_simcardGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
  
              &lt;a4j:region id="orderOverviewGraphRegion"&gt;
                  &lt;h:panelGroup&gt;
                      &lt;div class="rounded_box dashboard_box" id="order"&gt;
                          &lt;ui:include src="dashboard_orderOverviewGraph.xhtml"/&gt;
                      &lt;/div&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/a4j:region&gt;
          &lt;/h:panelGrid&gt;
  
              &lt;h:panelGrid id="dashboadRefreshPanel" columns="1"  width="100%"&gt;
                  &lt;a4j:commandButton value="#{I18n.messages['dashboard.btn.refresh']}" 
                      action="#{dashboardBean.doRefresh}" reRender="resourceGraphRegion, profileGraphRegion, reportGraphRegion, installedBaseGraphRegion, simcardGraphRegion, orderOverviewGraphRegion"
                       image="/static/images/refresh.png" style="border:0px; margin-right: 20px; padding: 0px; float: right;" /&gt;
              &lt;/h:panelGrid&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>
      </p>
  
  <p>However, when manually triggering the a4j:commandLink the whole page becomes inactive (grays out) and a loading icon appears.
  What I would like is the the page opens up very smoothly and that all 6 regions are rendered async so the user gets a smooth experience and doesn't have to wait for all regions to complete
  .</p>