importHref should load imports asynchronously

[ebidel]

Polymer.Base.importHref doesn't load imports asynchronously. In apps, this can cause layout flashes as the import is added to the DOM and loads. I've witnessed this on a couple of apps were we're using importHref to dynamically load bundles, asynchronously.

Instead, loading it with the async attr take it out of rendering and solves the issue.

[kevinpschaaf]

Can you provide a repro of how the layout "flashes" when a sync import is added to the document?

It doesn't make sense that a sync import would cause fouc and that making it async would fix it, without there being some sort of underlying Chrome bug, so it's worth understanding what you're actually seeing.

[ebidel]

Sure. Here are some examples.

Sync load (flash):

Sync load (watch for flash after spinner stops):

Async load (no flash. elements fade in when they're upgraded):

Test app (run in canary so you dont need to babel):

1. git clone https://github.com/ebidel/polymer-experiments
2. cd polymer-experiments/polymersummit/fouc/
3. bower install
4. Remove ".v" in https://github.com/ebidel/polymer-experiments/blob/master/polymersummit/fouc/binding.html#L10 to use the unvulcanized version.

Serve up binding.html. It won't produce a flash.

1. To make it flash, change https://github.com/ebidel/polymer-experiments/blob/master/polymersummit/fouc/elements/bootstrap.html#L61 by adding false as a 2nd param to importHref. That makes it sync:

   importHref('elements/elements-no-polymer.v.html', false).then(function(link) {
   

Not sure what's going on here. It may be something with stylesheets/styles in imports getting added to the main document and causing layout/recalc styles. That's my hunch, but I haven't bee able to pinpoint it. FWIW, Both of these apps also use paper-drawer-panel.

[kevinpschaaf]

Reproduced the blinking issue down to an apparent chrome bug related to async imports, filed here: https://code.google.com/p/chromium/issues/detail?id=564758

[TimvdLippe]

@kevinpschaaf Your link results in a 403.

[ebidel]

It's restricted, internal for some reason.

[kevinpschaaf]

@JeremybellEU Sorry, should be unrestricted now.

[TimvdLippe]

👍

[ebidel]

Default will be sync, but we're adding the optional 4th arg for async :)