How to add a preloader or message box that appears during the loading of each page in inAppBrowser?

I have an application that just open inAppBrowser, I’d like to add something for a good user experience, because both the application itself and the pages load too slowly. I tried to do this in different ways, from simply inserting js, html, css into inAppBrowser, delayed by splashScreen.hide(), and ending with different libraries like SpinnerDialog. I also tried to do this through angular CanActivate guard. In all cases, I couldn’t achieve the desired behavior, or nothing happens, or the loader only at startup, or even a white screen. Here, for example, is one of the first solutions that I found:
`import { Component } from “@angular/core”;
import { Platform } from “ionic-angular”;
import { InAppBrowser } from “@ionic-native/in-app-browser”;
import { SpinnerDialog } from ‘@ionic-native/spinner-dialog/ngx’;

@Component({
template: <p>Loading...</p>
})
export class HomePage {
constructor(private iab: InAppBrowser, public platform: Platform, private spinnerDialog: SpinnerDialog) {

platform.ready().then(() => {
  let browser = this.iab.create("'https://www.google.com'", "_blank", {
    location: "no",
    zoom: "no"
  });

  browser.on('loadstart').subscribe((eve) => {
    this.spinnerDialog.show(null, null, true);     
  }, err => {
    this.spinnerDialog.hide();
  })
  
  browser.on('loadstop').subscribe(()=>{
    this.spinnerDialog.hide();
  }, err =>{
    this.spinnerDialog.hide();
  })
  
  browser.on('loaderror').subscribe(()=>{
    this.spinnerDialog.hide();
  }, err =>{
    this.spinnerDialog.hide();
  })
  
  browser.on('exit').subscribe(()=>{
    this.spinnerDialog.hide();
  }, err =>{
    this.spinnerDialog.hide();
  })

  browser.show();
});

}
}` But I just have a white screen.
I can provide any information you need, I complete this task for several days…

Can you check with this link. This having some explanation.

Yes, this is one of the first links that I googled, but I can’t do it like that - just a white screen and I don’t understand why

Did you check with native spinner which is the second answer in the link?

Yes, it didn’t work out

lets try this way.

constructor(private iab: InAppBrowser) { }

const browser = this.iab.create(‘https://ionicframework.com/’);

browser.on(‘loadstart’).subscribe(event => {
//inside a class create the below css properties and call here
browser.insertCSS({ .loader(// refer below css ) });
});

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

browser.close();