Flash of Unstyled Content

[Kris]

I'm trying to introduce GWT into an existing page, both to get rid of
my Javascript headaches, and to take advantage of ClientBundle. I'm
using:

...
private static final MyClientBundle myBundle =
GWT.create( MyBundle.class );

public void onModuleLoad() {
StyleInjector.injectAtStart( myBundle.style().getText(), true );
...
}
...

...and everything shows up as expected, but on the compiled-down code
there's a brief flash of unstyled content (FOUC) before the bundle
kicks in. It's the same problem on IE, FF, Safari & Chrome.

I can see why it's happening - onModuleLoad won't get called until the
browser calls onLoad, and by then it's already rendered the page - but
I'd like to fix it if I can. (I suppose I can hide the page as it
loads and use GWT to make it visible, but that feels a bit hackish.)
Does anyone have a proper way to fix this?

[Stefan Bachert]

Hi,

I did not get you completely.
MyClientBundle and MyBundle is a type?

Maybe you could defer the creating of GWT widget by using
DeferredCommand.
Then the styles are loaded before creating the GWT-widgets. And you
can get rid of parameter "true"


Stefan Bachert
http://gwtworld.de

[Kris]

Thanks Stefan. :-)

Yes, sorry - I typed that code it when I should have copied and pasted
- it would have been clearer. Here's the whole of my module:

public class FrontPage implements EntryPoint {
private static final FrontPageClientBundle clientBundle =
GWT.create( FrontPageClientBundle.class );

public void onModuleLoad() {

StyleInjector.injectAtStart( clientBundle.style().getText(), true );
}
}

I actually don't have any GWT widgets - at least not yet. I just want
to take advantage of GWT's spriting & hashing to begin with, to speed
up the load of an existing page. And it works *really* well, except
for the brief flash at the beginning where the page renders once
without any style information. That's the problem I'm trying to solve.

Any ideas?

Kris

On Jun 25, 6:52 pm, Stefan Bachert <stefanbach...@yahoo.de> wrote:
> Hi,
>
> I did not get you completely.
> MyClientBundle and MyBundle is a type?
>
> Maybe you could defer the creating of GWT widget by using
> DeferredCommand.
> Then the styles are loaded before creating the GWT-widgets. And you
> can get rid of parameter "true"
>

> Stefan Bacherthttp://gwtworld.de

[Thomas Broyer]

On 26 juin, 10:12, Kris <krisajenk...@gmail.com> wrote:
> Thanks Stefan. :-)
>
> Yes, sorry - I typed that code it when I should have copied and pasted
> - it would have been clearer. Here's the whole of my module:
>
> public class FrontPage implements EntryPoint {
>         private static final FrontPageClientBundle clientBundle =
> GWT.create( FrontPageClientBundle.class );
>
>         public void onModuleLoad() {
>
> StyleInjector.injectAtStart( clientBundle.style().getText(), true );
>         }
>
> }
>
> I actually don't have any GWT widgets - at least not yet. I just want
> to take advantage of GWT's spriting & hashing to begin with, to speed
> up the load of an existing page. And it works *really* well, except
> for the brief flash at the beginning where the page renders once
> without any style information. That's the problem I'm trying to solve.
>
> Any ideas?

As good as GWT ClientBundle is, it's not meant to solve your issue
(styling an HTML page). If I were you, I'd either:
- rather use other CSS tooling (http://sass-lang.com/ or http://lesscss.org/
for instance, and/or http://spriteme.org/ )
- if you want to stick with GWT's ClientBundle, create your own
Linker (inspired by XSLinker if I were you) to (try to) load the
stylesheet "synchronously", without waiting for the onload/
DOMContentLoad event.

But really I find it weird to use JavaScript to control "plain old
styling", so I'd rather go the first way, i.e. using the right tool
for the job.

[Kris]

Cheers Thomas.

Yeah, I appreciate I might be making a rod for my back here. If
ClientBundle were the only GWT feature I were planning to use, and
there was another spriting solution with proper i18n support, I might
well take another route. As it is, I'll think I'll cautiously look
into writing my own Linker.

Thanks very much for the tips,
Kris