How to show loading spinner / indicator when InAppBrowser launches for iOS version of Cordova

Question

We are trying to display an indicator that the web page is loading when launching an instance of InAppBrowser on iOS version of Cordova 3.4.

Android works fine with a spinner on the bottom, but iOS shows nothing but a white screen until the page suddenly pops up.

We were initially looking into using event listeners:

https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#addeventlistener

to listen to loadstart and loadstop and add js/css to show loading within the appbrowser window

https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#executescript and https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#insertcss

Still working on a viable solution.

Answer 1

The iOS InAppBrowser object has its own spinner which it adds to the webview automatically.

However, as the spinner is created as UIActivityIndicatorViewStyleWhite and the background of the webview is white you can't see it.

So I updated this like so:

self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

Also, the x co-ordinate of the spinner's frame are outside the bounds of an iPhones view. To fix this I updated the frame to:

self.spinner.frame = CGRectMake(self.view.frame.size.width / 2 - 10, self.view.frame.size.height/ 2 - 10, 20, 20);

This should centre the spinner no matter what size of device you are using.

I have only tested this in portrait mode.

You may want to fork Cordova (I'm testing this with 3.4) and submit a patch or see if there is a "proper" way to do this.