"page loading" modai dialog

[mathias]

Hi,

our page takes quite a while to load, so we're going to look into creating some sort of load-dialog. You have a square-shaped one in your showcase, but i couldn't see the source for that anywhere. Is there an example somewhere that i've missed?

[Blama]

Hi mathias,

I use the same technique. Just do a "view source" on the showcase. Its HTML+JS and not SmartGWT/Java.

Best regards
Blama

[mathias]

Right, thanks! Do youj know if there's a way to take into account the time it takes to load all those mega-javascript-library files?

[Blama]

Hi mathias,

this the relevant excerpt of my main JSP file. You can perhaps simplify it a bit.

        <script type="text/javascript">var isomorphicDir = "myproj/sc/"; var buildDate="<%=buildDate %>"</script>

        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Core API...';</script>

        <script type="text/javascript" src="myproj/sc/modules/ISC_Core.js<%=version %>"></script>

        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading UI Components...';</script>
        <script type="text/javascript" src="myproj/sc/modules/ISC_Foundation.js<%=version %>" ></script>
        <script type="text/javascript" src="myproj/sc/modules/ISC_Containers.js<%=version %>"></script>
        <script type="text/javascript" src="myproj/sc/modules/ISC_Grids.js<%=version %>"></script>
        <script type="text/javascript" src="myproj/sc/modules/ISC_Forms.js<%=version %>"></script>

        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Data API...';</script>
        <script type="text/javascript" src="myproj/sc/modules/ISC_DataBinding.js<%=version %>"></script>

        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading DataSources...';</script>

        <% /** Load the datasources **/ %>
        <script src="myproj/sc/DataSourceLoader<%=version %>&amp;lastDSChange=<%=dsLastChangedISO %>&amp;loggedInUserName=<%=loggedInUserName %>&amp;locale=<%=userLanguage %>&amp;dataSource=<%=outputDataSources()%>"></script>

        <% /** Load skin **/ %>
        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading skin...';</script>

        <script type="text/javascript" src="myproj/sc/skins/Simplicity/load_skin.js<%=version %>"></script>

        <% /** This script loads your compiled module. If you add any GWT meta tags, they must be added before this line. **/ %>
        <script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading product';</script>
        <script type="text/javascript" language="javascript" src="myproj/myproj.nocache.js"></script>

I also have this in my main Java file, don't know if it is needed:

                        RootPanel.get("productName").getElement().removeFromParent();
                        RootPanel.get("loadingMsg").getElement().removeFromParent();
                        RootPanel.get("waitMsg").getElement().removeFromParent();
                        RootPanel.get("productImg").getElement().removeFromParent();
                        RootPanel.get("loadingIndicator").getElement().removeFromParent();
                        RootPanel.get("loading").getElement().removeFromParent();
                        RootPanel.get("loadingWrapper").getElement().removeFromParent();

Best regards
Blama

[Blama]

You might be interested in this client side caching post as well.

[mathias]

Blama,

huge thanks for taking the time to answer to this. It's really useful and i hope to look at it shortly. Hard to find time to do everything at once when you're a small team :)