How to know setAttribute() method loaded css or not-CodePudding

I am changing css files dynamically. it is working fine, but when I am changing it, for few second(1 or 2) screen is broken. I am trying like this:

replaceHref(linkElement: HTMLElement, href: string) {
            linkElement.setAttribute('href', href);
    }

I don't want to see user broken screen when he/she changing theme, how can I show some loader or any message till setAttribute() method completely loaded css. I am trying it from last 3 days but not able to achieve this thing. Is there any way to do this? . Thanks in advance!

CodePudding user response：

Looking at this page, it appears that .setAttribute() isn't async, so you should do stuff exactly after the .setAttribute() line.

Maybe that works, but I don't know because we are only getting 3 lines of code to work with..

CodePudding user response：

You can add a loader till the time href is set. Please use the below code.

constructor(private loader:NgxSpinnerService){}

replaceHref(linkElement: HTMLElement, href: string) {
      this.loader.show();
      setTimeOut(()=>{
          linkElement.setAttribute('href', href);
          this.loader.hide();
          },500);
        
}
Please check [https://www.npmjs.com/package/ngx-spinner for documentation][1]