Flash of un-styled content
vhdo opened this issue · comments
Hi,
Your module is pretty awesome, however i have a little problem, while loading my page for the first time, i have a tiny moment when the css is not yet applied to the html so i can see all the html element without css.
My application is very simple: it has only one module named Homepage that load the homepage of the site.
-> I inject the homepage.css in the stateProvider in the config/homepage.js which is the first file to be load of the module Homepage.
-> In terms of timing the site takes about 550ms to completely load.
-> The homepage.css is load at about 450ms and the homepage.html is load at 550ms. So the css is load about 100ms before the html however i always have this moment without css.
Do you have any ideas how to fix this?
Thanks
It happens because there's a gap between CSS being available to the browser and before is applied.
You can find more information about this issue here:
- https://medium.com/opinionated-angularjs/angular-dynamically-injecting-css-file-using-route-resolve-and-promises-7bfcb8ccd05b.
- https://github.com/VIISON/RequireCSS
In order to fix it you can check regularly document.styleSheets for changes before rendering. Not sure how to apply the fix to angular-css tough.
Thanks gsans for your reply. That's what i'm thinking so for instance, i create the injectCss service and inject in the stateProvider with resolve which is worked well. It would be nice to be able to use resolve with angular-css
Is this issue resolved with angular-css? Or do we still need to manually fix this issue?