From 1383b9b7353e4ec7862499c7d9aa337842fd62dc Mon Sep 17 00:00:00 2001
From: Weijia <weijia@oben.com>
Date: Thu, 20 Jun 2019 12:02:16 -0700
Subject: [PATCH] [IMPROVEMENT] Activity indicator on web view OAuth (#980)
* add activity indicator when web view is loading
* fix eslint error
* remove one extra newline
---
app/views/OAuthView.js | 26 ++++++++++++++++++++++++--
1 file changed, 24 insertions(+), 2 deletions(-)
diff --git a/app/views/OAuthView.js b/app/views/OAuthView.js
index d418b8dad..ab28c3f73 100644
--- a/app/views/OAuthView.js
+++ b/app/views/OAuthView.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { WebView } from 'react-native-webview';
import { connect } from 'react-redux';
-
+import { ActivityIndicator, StyleSheet } from 'react-native';
import RocketChat from '../lib/rocketchat';
import { isIOS } from '../utils/deviceInfo';
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 (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 => ({
server: state.server.server
}))
@@ -29,7 +41,8 @@ export default class OAuthView extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
- logging: false
+ logging: false,
+ loading: false
};
this.redirectRegex = new RegExp(`(?=.*(${ props.server }))(?=.*(credentialToken))(?=.*(credentialSecret))`, 'g');
}
@@ -58,6 +71,7 @@ export default class OAuthView extends React.PureComponent {
render() {
const { navigation } = this.props;
+ const { loading } = this.state;
const oAuthUrl = navigation.getParam('oAuthUrl');
return (
<React.Fragment>
@@ -74,7 +88,15 @@ export default class OAuthView extends React.PureComponent {
this.login({ oauth: { ...credentials } });
}
}}
+ onLoadStart={() => {
+ this.setState({ loading: true });
+ }}
+
+ onLoadEnd={() => {
+ this.setState({ loading: false });
+ }}
/>
+ { loading ? <ActivityIndicator size='large' style={styles.loading} /> : null }
</React.Fragment>
);
}
--
GitLab