[RN] Show a progress indicator in the BlankPage

It will only be shown when there are ongoing network requests.

react/features/welcome/components/AbstractBlankPage.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+
+import { destroyLocalTracks } from '../../base/tracks';
+
+/**
+ * A React <tt>Component</tt> which represents a blank page. Destroys the local
+ * tracks upon mounting since no media is desired when this component utilized.
+ * Renders nothing.
+ */
+export default class AbstractBlankPage extends Component {
+    /**
+     * <tt>AbstractBlankPage</tt> React <tt>Component</tt>'s prop types.
+     *
+     * @static
+     */
+    static propTypes = {
+        dispatch: PropTypes.func
+    };
+
+    /**
+     * Destroys the local tracks (if any) since no media is desired when this
+     * component is rendered.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentWillMount() {
+        this.props.dispatch(destroyLocalTracks());
+    }
+
+    /**
+     * Implements React's {@link Component#render()}. Returns null because the
+     * purpose of this component is to destroy the local tracks and render
+     * nothing.
+     *
+     * @inheritdoc
+     * @returns {null}
+     */
+    render() {
+        return null;
+    }
+}

react/features/welcome/components/BlankPage.js

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-import { connect } from 'react-redux';
-
-import { destroyLocalTracks } from '../../base/tracks';
-
-/**
- * A React <tt>Component<tt> which represents a blank page. It renders nothing
- * and destroys local tracks upon being mounted since no media is desired when
- * this component is rendered.
- *
- * The use case which prompted the introduction of this component is mobile
- * where SDK users probably disable the Welcome page.
- */
-class BlankPage extends Component {
-    /**
-     * {@code BlankPage} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        dispatch: PropTypes.func
-    };
-
-    /**
-     * Destroys the local tracks (if any) since no media is desired when this
-     * component is rendered.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentWillMount() {
-        this.props.dispatch(destroyLocalTracks());
-    }
-
-    /**
-     * Implements React's {@link Component#render()}. In this particular case
-     * we return null, because the entire purpose of this component is to render
-     * nothing.
-     *
-     * @inheritdoc
-     * @returns {null}
-     */
-    render() {
-        return null;
-    }
-}
-
-export default connect()(BlankPage);

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

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { connect } from 'react-redux';
+
+import AbstractBlankPage from './AbstractBlankPage';
+import styles from './styles';
+
+/**
+ * Mobile/React Native implementation of <tt>AbstractBlankPage</tt>. Since this
+ * is the <tt>Component</tt> rendered when there is no <tt>WelcomePage</tt>,
+ * it will show a progress indicator when there are ongoing network requests
+ * (notably, the loading of config.js before joining a conference). The use case
+ * which prompted the introduction of this <tt>Component</tt> is mobile where
+ * SDK users probably disable the <tt>WelcomePage</tt>.
+ */
+class BlankPage extends AbstractBlankPage {
+    /**
+     * <tt>BlankPage</tt> React <tt>Component</tt>'s prop types.
+     *
+     * @static
+     */
+    static propTypes = {
+        ...AbstractBlankPage.propTypes,
+
+        /**
+         * Indicates whether there is network activity i.e. ongoing network
+         * requests.
+         *
+         * @private
+         */
+        _networkActivity: PropTypes.bool
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @override
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <View style = { styles.blankPage }>
+                <ActivityIndicator
+                    animating = { this.props._networkActivity }
+                    size = { 'large' } />
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React <tt>Component</tt> props of
+ * <tt>BlankPage</tt>.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     networkActivity: boolean
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { requests } = state['features/net-interceptor'];
+
+    return {
+        _networkActivity: Boolean(requests && Object.keys(requests).length)
+    };
+}
+
+export default connect(_mapStateToProps)(BlankPage);

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

@@ -0,0 +1,10 @@
+import AbstractBlankPage from './AbstractBlankPage';
+
+/**
+ * Default <tt>BlankPage</tt> implementation for Web/React. It's not currently
+ * in use but it's here for symmetry with mobile/React Native should we choose
+ * to take advantage of it in the future. Destroys the local tracks and renders
+ * nothing.
+ */
+export default class BlankPage extends AbstractBlankPage {
+}

react/features/welcome/components/styles.js

@@ -11,9 +11,21 @@ import {
 const TEXT_COLOR = ColorPalette.white;
 
 /**
- * The styles of WelcomePage.
+ * The styles of the React <tt>Components</tt> of the feature welcome including
+ * <tt>WelcomePage</tt> and <tt>BlankPage</tt>.
  */
 export default createStyleSheet({
+    /**
+     * The style of <tt>BlankPage</tt>.
+     */
+    blankPage: {
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+
     /**
      * Join button style.
      */