Table appears for a second before spry Master/Detail loads

Question

Hi!
I'm using the Spry Master/Detail function on a page to display an interactive version of the table on the same page. On browser load, the table is briefly displayed before it is replaced by the Spry interactive table. Is there any way to avoid this? It looks kinda hokey.
ps I know I could avoid it by putting the table on another page, but then it wouldn't be searchable.
Thanks in advance.
Mignonne

Answer 1

Sorry for butting in, Hi Beth,
Considering the number of images that have to be loaded before the data can be displayed, the page is quite fast.
There are a couple of things that can be done to make it load faster and to give it a feel that is is loading faster.
To make it run faster consider
compressing components with GZip, see here http://developer.yahoo.com/performance/rules.html#gzip
placing expiry headers on images, css and js see here http://developer.yahoo.com/performance/rules.html#expires
place the reference to js files further down, see here http://developer.yahoo.com/performance/rules.html#js_bottom
use a Content Delivery Network, see here http://developer.yahoo.com/performance/rules.html#cdn
To make it feel as though it runs faster, hide the contents until the data has been processed and issue a message or loading bar to that extent.
1. add the following style rule to make use of the SpryHiddenRegion feature
.SpryHiddenRegion {visibility:hidden;}
2. change the first part of the Master/Detail region to
  <div class="MasterDetail">
    <div spry:region="dsepimediums">
     <div spry:state="loading" align="center"><h2>Loading data, please wait ...</h2></div>
      <div spry:state="ready">
        <div class="MasterContainer">
          <div class="MasterColumn" spry:repeat="dsepimediums" spry:setrow="dsepimediums" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected"><span spry:content="{Plant_Name}"></span></div>
        </div>
      </div>
    </div>
    <div spry:detailregion="dsepimediums" class="DetailContainer SpryHiddenRegion">
      <div class="DetailColumn"><h2>{Plant_Name}</h2></div>
Here we are making use of the various states that Spry goes through see here http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSFC2EB69F-9F15-4005-A993-B7667 BA7EB75.html
We are also doing our best to hide our data until fully available see here http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WSFC2EB69F-9F15-4005-A993-B7667 BA7EB75.html
I hope this helps.