Progress bar during GWT bootstrap process?

[Ali Akhtar]

When GWT based sites are first loaded, the browser shows a loading indicator as nocache.js is downloaded. But then, when nocache.js inserts the actual scripts, there's no loading indicator, and the user is left staring at an idle screen. Not a very good experience.

Is it possible to show a progress bar indicator as the other gwt assets loaded during the bootstrap process, are downloaded?

[Peter Donald]

The easiest way to do that is to just have the base page have a
loading indicator and have the last action in your EntryPoint remove
the loading indicator. If you want progress as loads occur then you
can just update the progress level from each step in your EntryPoint.
HTH

> --
> You received this message because you are subscribed to the Google Groups
> "GWT Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to google-web-tool...@googlegroups.com.
> To post to this group, send email to google-we...@googlegroups.com.
> Visit this group at http://groups.google.com/group/google-web-toolkit.
> For more options, visit https://groups.google.com/d/optout.



--
Cheers,

Peter Donald

[Ali Akhtar]

But, I'm talking about the time from when the user visits the site, to the time when the entrypoint's onModuleLoad is called. Often there can be a few seconds of lag between nocache.js loading -> onModuleLoad being called. Is there a way to show a progress bar during that period, e.g to show the remaining assets to be downloaded before onModuleLoad is called?

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/Cr8DuGnX1lk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

[Jens]

But, I'm talking about the time from when the user visits the site, to the time when the entrypoint's onModuleLoad is called. Often there can be a few seconds of lag between nocache.js loading -> onModuleLoad being called. Is there a way to show a progress bar during that period, e.g to show the remaining assets to be downloaded before onModuleLoad is called?

Thats why he said you should put the loading indicator into your index.html and let the entry point remove it once it is executed. Works well.

-- J. 

[Frank]

Like Peter and Jens said, put a loading indicator in your host html page, and remove it in onModuleLoad.

For example. Put in your html :

<div id="splash">

   <div align="center">

      <img style="padding-top: 50px" src="img/ajax-loader-64.gif">

      <h3>Launching application<BR/>Please wait....</h3>

   </div>

</div>

And then in your onModuleLoad

RootPanel.getBodyElement().removeChild(DOM.getElementById("splash"));

[Ali Akhtar]

This is what I am doing currently. But its not the most user friendly.

I'd like to show a progress bar which indicates how much longer there is to go.

Worst case, I can override the Dom function for injecting a script, and use that to request the scripts over websockets, and update the progress with each frame sent.

Is that what I have to do, or is there a better way?

--

[Jens]

This is what I am doing currently. But its not the most user friendly.

I'd like to show a progress bar which indicates how much longer there is to go.

Worst case, I can override the Dom function for injecting a script, and use that to request the scripts over websockets, and update the progress with each frame sent.

Is that what I have to do, or is there a better way?

I often use fake progress bars if I don't have progress information or don't want to do nasty things to obtain the information. To do so I calculate the mean duration of a given task and store it in local storage. Then I use the mean duration to animate the progress bar. To handle the rare case that a task takes much longer than usual I only animate the progress bar to 95% and then stay there until the task completes.

Usually it works quite well for me.

-- J.

[Vassilis Virvilis]

Just to make sure we are on the same page.

How much time does it take to load?

This looks serious overkill to me...

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--

Vassilis Virvilis

[Ali Akhtar]

It can take up to 10 seconds on slow connections. May be even more on mobile connections.

[Vassilis Virvilis]

That's weird,,,

What is the size *.cache.js?

Make sure your webserver/tomcat serves compressed content.

[Ali Akhtar]

I use cssresource, etc. With all the images, etc combined, the size can be pretty high.

[Vassilis Virvilis]

As I said check that the content you serve is compressed.

One other idea that pops to mind is the browser's developer's tools net tab to make sure that the problem is indeed in the loading of resources. Maybe you can identify a problematic resource? Or that the problem is not in the GWT script?

Otherwise I agree with Peter Donald post above for the most effective way to have a spinner/blocker element during load.

[Greg]

Hi

I used GWT Lightweight Metrics in several of my projects. The progress looks real and gives some idea to a user how long he has to wait.

More info here:

http://www.gwtproject.org/doc/latest/DevGuideLightweightMetrics.html

Basically you have to put static script before nocache.js file that registers for metric events and from it updates the length of the progress bar.

Most of the time I just counted the amount of events required to show the actual app (I used a splash div with progress bar which hides the app until it's ready) including bootstrap and rpc events and used it as total amount for progress bar.

The drawback is, there are only 2 events fired when GWT loads scripts from gwt.xml. If you load big js libraries let me know so I can post a workaround for that :)

Greg

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--

Vassilis Virvilis

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/Cr8DuGnX1lk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--

Vassilis Virvilis

--
You received this message because you are subscribed to a topic in the Google Groups "GWT Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/Cr8DuGnX1lk/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--

Vassilis Virvilis

[Thomas Broyer]

Have you looked at code splitting to optimize initial load?