Progress bar during GWT bootstrap process?

175 views
Skip to first unread message

Ali Akhtar

unread,
Oct 26, 2015, 7:54:17 PM10/26/15
to GWT Users
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

unread,
Oct 26, 2015, 8:46:47 PM10/26/15
to GWT Mailing List
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

unread,
Oct 26, 2015, 8:49:51 PM10/26/15
to Google Web Toolkit
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

unread,
Oct 27, 2015, 2:56:10 AM10/27/15
to GWT Users

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

unread,
Oct 27, 2015, 6:50:13 AM10/27/15
to GWT Users
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

unread,
Oct 27, 2015, 12:44:46 PM10/27/15
to Google Web Toolkit

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

unread,
Oct 27, 2015, 1:01:42 PM10/27/15
to GWT Users

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

unread,
Oct 27, 2015, 2:07:42 PM10/27/15
to google-we...@googlegroups.com
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

unread,
Oct 27, 2015, 2:11:37 PM10/27/15
to Google Web Toolkit

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

Vassilis Virvilis

unread,
Oct 27, 2015, 2:15:26 PM10/27/15
to google-we...@googlegroups.com
That's weird,,,

What is the size *.cache.js?

Make sure your webserver/tomcat serves compressed content.

Ali Akhtar

unread,
Oct 27, 2015, 2:16:53 PM10/27/15
to Google Web Toolkit

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

Vassilis Virvilis

unread,
Oct 27, 2015, 2:26:33 PM10/27/15
to google-we...@googlegroups.com
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

unread,
Oct 27, 2015, 3:32:42 PM10/27/15
to GWT Users
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:

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

unread,
Oct 27, 2015, 3:33:22 PM10/27/15
to GWT Users
Have you looked at code splitting to optimize initial load?
Reply all
Reply to author
Forward
0 new messages