Deferred Data Loading

[sbasinge]

I have a dashboard page that has several data tables that get their data from external reources (our ERP). There's also several data tables that get data locally and load really fast. What I'd like to do is show the page with the fast data loaded, and then get the other data in the background, while showing the spinner.gif on the slow loading tables. I have one slow loading table working using a4j:support and some wierd javascript. When I tried to duplicate for a second table, a4j:support kept updating the first table instead. There must be a better way?

<ui:define name="body">
 <h:form id="page1">
 <rich:panel id="mainPanel">
 <h:panelGrid columns="2" columnClasses="column.fifty, column.fifty" id="mainGrid">
 <rich:panel id="MyGuestSalesPanel" header="My Guest Sales">
 <h:inputHidden id="myGuestSalesLoadData">
 <a4j:support event="onchange"
 actionListener="#{PersonalSalesManager.setLoadMySalesData('true')}"

 reRender="personalSalesList" limitToList="true"/>
 </h:inputHidden>
 <a4j:status id="myGuestSalesStatus">
 <f:facet name="start">
 <h:graphicImage value="/img/spinner.gif" />
 </f:facet>
 </a4j:status>
 <rich:dataTable id="personalSalesList" var="_salesBean"
 value="#{PersonalSalesManager.personalSales}">
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Sales Month" />
 </f:facet>
 <h:outputText value="#{_salesBean.salesDate}">
 <f:convertDateTime type="date" pattern="MMM yyyy"/>
 </h:outputText>
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Month To Date" />
 </f:facet>
 <h:outputText value="#{_salesBean.periodSales}" />
 </rich:column>
 <rich:column>
 <f:facet name="header">
 <h:outputText value="Year To Date" />
 </f:facet>
 <h:outputText value="#{_salesBean.yearToDateSales}"/>
 </rich:column>
 </rich:dataTable>
 </rich:panel>
 <rich:panel header="Show Order Status">
 <h:inputText id="showOrderLoadData">
 <a4j:support id="orderStatusSupport" event="onchange"
 actionListener="#{LOISTransactionManager.setLoadMySalesData('true')}"
 reRender="showOrderList" limitToList="true" />
 </h:inputText>
 <rich:dataTable id="showOrderList" var="_orderBean"
 value="#{LOISTransactionManager.lastFiveShows}" >
 .
 .
 . </rich:dataTable>
 </rich:panel>
 </h:panelGrid>
 </rich:panel>
 <script>
 function changeData() {
 page1:myGuestSalesLoadData = "true";
 page1:showOrderLoadData = "true";
 A4J.AJAX.Submit('_viewRoot','page1',null,{'parameters':{'page1:j_id77':'page1:j_id77'}
 ,'actionUrl':'/testfromoracle/LandingPage.seam','affected':['page1:personalSalesList'] } );

 }
 window.onload = function()
 {
 changeData();
 }
 </script>
 </h:form>
</ui:define>