Is it possible to call readystateChange multiple times? My page loads big svgs in the .html. When I navigate the routes, i was able to see some lag.

Hence was hopping to use some loader to hide the lag but realize i was unable to call document.readystatechange mutiple time.

Example: App.component.ts

ngAfterViewInit() : void {
 var self = this;
 document.addEventListener('readystatechange', function(evt:any) {
      switch (evt.target.readyState) {
        case "loading":
          // The document is still loading.
          break;
        case "interactive":
          // The document has finished loading. We can now access the DOM elements.
          break;
        case "complete":
          // The document and all sub-resources have finished loading.
          console.log("Completed success? 2 time?")
          self.closeLoader();
          break;
      }
    }, false);
}

Ps: I tried to put the same code in the guards so it will execute the code again but nothing happened. Thank you in advance.