[RN] NetworkActivityIndicator

The basic indicator is extracted into a LoadingIndicator component,
which then NetworkActivityIndicator displays (or not) based on network
activity.

react/features/app/components/App.native.js

@@ -10,7 +10,6 @@ import '../../mobile/audio-mode';
 import '../../mobile/background';
 import '../../mobile/external-api';
 import '../../mobile/full-screen';
-import '../../mobile/network-activity';
 import '../../mobile/permissions';
 import '../../mobile/proximity';
 import '../../mobile/wake-lock';

react/features/base/react/components/native/LoadingIndicator.js

@@ -0,0 +1,24 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { ActivityIndicator } from 'react-native';
+
+/**
+ * Simple wrapper around React Native's {@code ActivityIndicator}, which
+ * displays an animated (large) loading indicator.
+ */
+export default class LoadingIndicator extends Component {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ActivityIndicator
+                animating = { true }
+                size = { 'large' } />
+        );
+    }
+}

react/features/base/react/components/native/index.js

@@ -1,3 +1,4 @@
 export { default as Container } from './Container';
 export { default as Link } from './Link';
+export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as Text } from './Text';

react/features/mobile/network-activity/components/NetworkActivityIndicator.js

@@ -0,0 +1,58 @@
+/* @flow */
+
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { LoadingIndicator } from '../../../base/react';
+
+/**
+ * The React <tt>Component</tt> which renders a progress indicator when there
+ * are ongoing network requests.
+ */
+class NetworkActivityIndicator extends Component {
+    /**
+     * <tt>NetworkActivityIndicator</tt> React <tt>Component</tt>'s prop types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Indicates whether there is network activity i.e. ongoing network
+         * requests.
+         *
+         * @private
+         */
+        _networkActivity: PropTypes.bool
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return this.props._networkActivity ? <LoadingIndicator /> : null;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React <tt>Component</tt> props of
+ * <tt>NetworkActivityIndicator</tt>.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     _networkActivity: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { requests } = state['features/network-activity'];
+
+    return {
+        _networkActivity: Boolean(requests && requests.size)
+    };
+}
+
+export default connect(_mapStateToProps)(NetworkActivityIndicator);

react/features/mobile/network-activity/components/index.js

@@ -0,0 +1,3 @@
+export {
+    default as NetworkActivityIndicator
+} from './NetworkActivityIndicator';

react/features/mobile/network-activity/index.js

@@ -1,2 +1,4 @@
+export * from './components';
+
 import './middleware';
 import './reducer';

react/features/welcome/components/BlankPage.native.js

@@ -2,10 +2,10 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 
 import { destroyLocalTracks } from '../../base/tracks';
+import { NetworkActivityIndicator } from '../../mobile/network-activity';
 
 import { isWelcomePageAppEnabled } from '../functions';
 import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
@@ -23,14 +23,6 @@ class BlankPage extends Component {
      * @static
      */
     static propTypes = {
-        /**
-         * Indicates whether there is network activity i.e. ongoing network
-         * requests.
-         *
-         * @private
-         */
-        _networkActivity: PropTypes.bool,
-
         /**
          * The indicator which determines whether <tt>WelcomePage</tt> is (to
          * be) rendered.
@@ -58,15 +50,12 @@ class BlankPage extends Component {
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
-     * @override
      * @returns {ReactElement}
      */
     render() {
         return (
             <LocalVideoTrackUnderlay style = { styles.blankPage }>
-                <ActivityIndicator
+                <NetworkActivityIndicator />
-                    animating = { this.props._networkActivity }
-                    size = { 'large' } />
             </LocalVideoTrackUnderlay>
         );
     }
@@ -79,16 +68,11 @@ class BlankPage extends Component {
  * @param {Object} state - The redux state.
  * @private
  * @returns {{
- *     _networkActivity: boolean,
  *     _welcomePageEnabled: boolean
  * }}
  */
 function _mapStateToProps(state) {
-    const { requests } = state['features/network-activity'];
-
     return {
-        _networkActivity:
-            Boolean(requests && (requests.length || requests.size)),
         _welcomePageEnabled: isWelcomePageAppEnabled(state)
     };
 }