The First-Time loading issue of a deployed GWT app?

I deployed my app and I got this issue.

The first time the app got loaded, it will show a blank white page for 5-7 second which is pretty long for a good user-experience. But after that, the page show really really fast since it got cached.

The problem is that when i advertised my site in Adword. When many people will visit my site for the first time, they could be impatient if it shows a blank page for a long period time like that.

I think the solution is to make an loading indicator to indicate user that the page is loading.

Actually I did do the indicator loading at the onModuleLoad method

public class MyProject implements EntryPoint {

private final ClientGinjector ginjector = GWT.create(ClientGinjector.class);

@Override
public void onModuleLoad() {
    // This is required for Gwt-Platform proxy's generator
    DelayedBindRegistry.bind(ginjector);

    ginjector.getPlaceManager().revealCurrentPlace();
    DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading"));

}

}

In MyProject.html

<html>
     <head>......</head>
     <body>
        <div id="loading">
           Loading<BR/>
           <img src="../images/loading.gif" />
        </div>
        <iframe.......></iframe>  
      ......
      </body>
</html>

However, the <div id="loading"> only works after all javascript files got loaded. It doesn't work right at the beginning user visits the site & that is why user will see a blank page for a pretty long time.

I am not sure GWT app is good for advertising in Google. But my page passed the Ad review from Adword people, so it means the page must be finally visible, otherwise Adword people will reject my page.

Can u figure out a solution for this?

Can we put the loading indicator at Server side?

Solution

My solution to this problem is to not use Javascript for the loader.

Vadim has a some good points, but other using code spliting.

Use a pure CSS loader.
Move the loading of the gwt javascript to the end of the page. This way, the loader is rendered before the javascript is loaded.
Remove the loading indicator after inserting objects into the dom for GWT.

Here are some example css loaders:

http://tobiasahlin.com/spinkit/

so your page would look like this:

<html>
 <head>
    <link rel="stylesheet" type="text/css" href="loading.css">
 </head>
 <body>
    <div id="loading">
    </div>
    <iframe.......></iframe>  
  ......
    <script src="my module script.js"/>
  </body>
</html>

While GWT documentation actually says, I believe, to do the opposite. It says something along the lines that "it's not needed to place the script at the bottom and slows loading of the script down" if I remember correctly. However, if the script takes a long time to load already, then it doesn't matter where it is in the page, so long as it is where it makes your page reactive the most quickly.

Removing and adding things to the DOM can look like this:

  Widget mainWidget = ...
  // add all widgets to mainWidget.
  RootPanel.get().insert(mainWidget,0);  //This adds the main widget below anything else.

  //remove the pre loading indicator

  Element e = Document.get().getElementById("loading");
  if (e != null)
  {
     e.removeFromParent();
  }