Angular lazy loading external styles and scripts on specific component causes layout glitch for brief second

Question

as I already described in the title, I have some styles and script that I only want to load on one specific component but this causes a glitch in the view, looks like the page is displayed before the css is loaded. Is there a way to adjust this code such a way that first all the css is loaded and then the page is displayed, preventing the glitch to happen ?

https://stackblitz.com/edit/angular-ivy-sjspyx?file=src/app/app.component.ts

I would really appreciate a fix for this.

Thank you.

Answer 1

Since those styles aren't included when the app is compiled and are added only when the component is initialized, i.e, in the constructor, I think your best bet would be to add a loading indicator (or progress spinner) that is then dismissed when the loadExternalScript function is completed:

constructor(){
// activate loading indicator

// rest of your code

}
private loadExternalScript(scriptUrl: Array<any>) {
    scriptUrl.forEach(function (item) {
      const scriptElement = document.createElement('script');
      scriptElement.src = item;
      scriptElement.async = false;
      scriptElement.defer = true;
      document.body.appendChild(scriptElement);
    });

    // dismiss loading indicator
}