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…