[IMPROVEMENT] Activity indicator on web view OAuth (#980)

* add activity indicator when web view is loading

* fix eslint error

* remove one extra newline
This commit is contained in:
Weijia 2019-06-20 12:02:16 -07:00 committed by Diego Mello
parent 5c8652ec16
commit 1383b9b735
1 changed files with 24 additions and 2 deletions

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { WebView } from 'react-native-webview'; import { WebView } from 'react-native-webview';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { ActivityIndicator, StyleSheet } from 'react-native';
import RocketChat from '../lib/rocketchat'; import RocketChat from '../lib/rocketchat';
import { isIOS } from '../utils/deviceInfo'; import { isIOS } from '../utils/deviceInfo';
import { CloseModalButton } from '../containers/HeaderButton'; import { CloseModalButton } from '../containers/HeaderButton';
@ -12,6 +12,18 @@ const userAgent = isIOS
? 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1' ? 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1'
: 'Mozilla/5.0 (Linux; Android 6.0.1; SM-G920V Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.98 Mobile Safari/537.36'; : 'Mozilla/5.0 (Linux; Android 6.0.1; SM-G920V Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.98 Mobile Safari/537.36';
const styles = StyleSheet.create({
loading: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center'
}
});
@connect(state => ({ @connect(state => ({
server: state.server.server server: state.server.server
})) }))
@ -29,7 +41,8 @@ export default class OAuthView extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
logging: false logging: false,
loading: false
}; };
this.redirectRegex = new RegExp(`(?=.*(${ props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g'); this.redirectRegex = new RegExp(`(?=.*(${ props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g');
} }
@ -58,6 +71,7 @@ export default class OAuthView extends React.PureComponent {
render() { render() {
const { navigation } = this.props; const { navigation } = this.props;
const { loading } = this.state;
const oAuthUrl = navigation.getParam('oAuthUrl'); const oAuthUrl = navigation.getParam('oAuthUrl');
return ( return (
<React.Fragment> <React.Fragment>
@ -74,7 +88,15 @@ export default class OAuthView extends React.PureComponent {
this.login({ oauth: { ...credentials } }); this.login({ oauth: { ...credentials } });
} }
}} }}
onLoadStart={() => {
this.setState({ loading: true });
}}
onLoadEnd={() => {
this.setState({ loading: false });
}}
/> />
{ loading ? <ActivityIndicator size='large' style={styles.loading} /> : null }
</React.Fragment> </React.Fragment>
); );
} }