Place app css after Connections core css to avoid blocking/flickering

[weber-d]

The customizer places all css/js files at the end of the body:

<link rel='stylesheet' type='text/css' href='/files/customizer/my-theme/dist/main.css?cache-control=max-age%3D0'></body></html>

This doesn't fit the best practices for performant web applications, since Connections itself loads a lot of CSS and JavaScript. All those files got loaded before the ressources of the customizer app. This is a problem, since parsing JavaScript is a blocking, time-consuming task for the browser. As a result, we got some flickering-effect, when CSS modifications are done using the customizer. Especially in old browsers like IE11.

So the customizer should follow best practices and keep the following load order:

1. Connections core CSS
2. Customizer apps CSS
3. Connections core JS
4. Customizer apps JS

It allow us to avoid such flickering effects, since CSS got parsed and displayed first for the user. Since JS is loaded and executed later, we don't have so much side-effects by blocking scripts.

[briangleeson]

This is something we also identified internally and has been fixed in the upcoming component pack release. Javascript files will be injected at the end of the body, whilst CSS files injected at the end of the head. This will match the best practice load order as you have outlined above