Loading Spinner inside the InAppBrowser Ionic

Issue

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.

Solution

Because inAppBrowser stays on top of the WebView, you cannot add a Loader using HTML. You can add a native Loader after adding the cordova-plugin-dialogs plugin. Here is some code to get you started:

To start loading:

navigator.notification.activityStart("Please Wait", "Its loading.....");

To stop Loader:

navigator.notification.activityStop();

If you need more information, check this reference.

Answered By - Arpit Vasani