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

StackOverflow https://stackoverflow.com/questions/22799146

  •  25-06-2023
  •  | 
  •  

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.

Was it helpful?

Solution

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.

OTHER TIPS

For anyone else using Phonegap Build, you can use my public plugin that implements these changes and makes the loading indicator (spinner) appear as it should in iOS.

Add this to your config.xml in your Phonegap Build project in place of the default InAppBrowser plugin to get the grey spinner described above by Goku:

<gap:plugin name="com.cordova.plugin.inappbrowser.with.loading.spinner" version="1.0.2" />

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top