search

Starcounter / starcounter-include

Custom Element to include HTML partials/templates from Starcounter
MIT License
0 stars 0 forks source link

FOUC caused by the stylesheet being applied asynchrously from cache #93

Closed warpech closed 6 years ago

warpech commented 6 years ago

Moved from https://github.com/Starcounter/RebelsLounge/issues/244

This issue is to track FOUC symptom that can be observed in BlendingEditor when browsing between subpages.

For a really short instant, you see: the old view > emptiness > the new unstyled view > the new styled view.

This is even when link rel="preload" is used.

Most probably it is caused by Unifom.css being applied asynchronously after the view is stamped by starcounter-include.

As @tomalec says, the problem might come from https://github.com/Juicy/imported-template/blob/c04fb61990f32ba14f98d670fb158a2cd718ba38/imported-template.html#L91-L93. If that's the case, it should be fixed in imported-template.

Otherwise, it must be mitigated in starcounter-include, perhaps using some display: none trick to hide the view until the stylesheet is available.

tomalec commented 6 years ago

I don't think those lines could cause FOC of styles applied asynchronously. Those lines append link from HTML Import asynchronously, therefore it makes the partial being loaded asynchronously.
Content (incl. styles) are being appended synchronously https://github.com/Juicy/imported-template/blob/c04fb61990f32ba14f98d670fb158a2cd718ba38/imported-template.html#L87

Therefore it may affect the performance of loading the async cascade of nested partials, but should have nothing to do with styles.

Also, there is not much that can be fixed on imported-template to solve that, as this is a bug in the browser, that has no other workaround other than this.

BTW, please note https://github.com/Juicy/imported-template/issues/54

warpech commented 6 years ago

We have three competing proposed solutions for the same FOUC. All of them are linked above. Let's discuss it when @tomalec is back from vacation.

warpech commented 6 years ago

Possible solution: https://github.com/Starcounter/StarcounterClientFiles/pull/103#issuecomment-407662246

tomalec commented 6 years ago

Possible solution: Starcounter/StarcounterClientFiles#103 (comment)

It solves only Uniform case, not the one when the composition author uses any other stylesheet.

tomalec commented 6 years ago

FOUC does not longer happen for styles applied using link rel="stylesheet"in Shadow DOM composition (it's now flash of no content, if there is a blocking link). Merged at https://github.com/Starcounter/CompanyTrack/issues/408

@warpech do we want to track here the FOUC caused by custom element definitions loaded from shadow DOM composition(enlighted-link), and link in light DOM?

warpech commented 6 years ago

No, my preferred approach would be to pospone these problems until we move out of HTML Imports. If you have some low-hanging fruit ideas, though, please open a new issue. Thanks!

tomalec commented 6 years ago

The new issue is here https://github.com/Starcounter/starcounter-include/issues/115, I believe light DOM styles should be easy as I already worked around the HTML Imports problem in Edge.