Loading Spinner inside the InAppBrowser Ionic

Question

I am trying to implement a IonicLoading Spinner inside the InAppBrowser while the page loads. This is what i am doing:

<button class="button" ng-controller="View" ng-click="showHelp('http://www.google.com')">
</button>

Controller:

.controller('View', function($scope, $ionicLoading) {

	$scope.showHelp=function(url) {
	var ref = window.open(url, '_blank', 'location=yes');
    ref.addEventListener('loadstart', function(){ $ionicLoading.show(); }); 
	ref.addEventListener('loadstop', function() { $ionicLoading.hide(); });
	
	}
})

The issue is the spinner doesn't load inside the InAppBrowser instead it shows in the background (i.e. visible only if i close the InAppBrowser)

Any help would be appreciated.

Answer 1

I am working with ionic V2+ (ionic 3 ) app and I used cordova-plugin-dialogs but it did not work for me as I expected. I used Spinner Dialog and work well. Please find the sample code below

Installing plugin

ionic cordova plugin add cordova-plugin-native-spinner

npm install --save @ionic-native/spinner-dialog

Code

import { InAppBrowser } from '@ionic-native/in-app-browser';
import { SpinnerDialog } from '@ionic-native/spinner-dialog';

constructor(
private iab: InAppBrowser,
private spinnerDialog: SpinnerDialog) { }

...

 const browser = this.iab.create('https://www.google.com',
  '_blank',
  {
    location: 'no',
    clearcache: 'yes',
    clearsessioncache: 'yes'
  });

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();
})