[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:
parent
5c8652ec16
commit
1383b9b735
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue