0

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.

Daniel
  • 11
  • 3

1 Answers1

0

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
}
laudebugs
  • 166
  • 1
  • 4
  • Hi Laurence and thank you for taking your time to look into it. I already tried this but I get the same output. Can you please adjust this in the stackblitz ( https://stackblitz.com/edit/angular-ivy-sjspyx?file=src/app/app.component.ts ) and show me a working example when you have some time? Thank you very much! – Daniel Feb 10 '22 at 17:52
  • I tried adding to class: loading: boolean = true; and as you suggested // dismiss loading indicator by setting this.loading = false and in the view *ngIf="!loading" on the wrapper class , but the behaviour is the same – Daniel Feb 10 '22 at 18:01
  • I had to add a `setTimeout` and [looks like it's working](https://stackblitz.com/edit/angular-ivy-c9jvrc?file=src/app/app.component.ts) - this is a bandaid solution though: – laudebugs Feb 10 '22 at 18:26
  • Indeed this prevents the behaviour! Thank you very much, if there is not other better solution than this I will mark this answer as valid. – Daniel Feb 11 '22 at 07:53