LoadingBanner [nfc]: Add, for many places where we need to show loading state.

For zulip#3387, provide the component to be used to show a loading
banner during the /register request.

This will be much improved with an animation, but progress is
blocked by zulip#3899. One idea is to give the exit animation a shorter
duration than the entrance animation, to give the impression that
we've been awaiting updates just as attentively as the user, and
that we're eager to show the updates and get out of the way
immediately.

Author: Chris Bobbe

src/common/LoadingBanner.js

@@ -0,0 +1,92 @@
+/* @flow strict-local */
+
+import React, { PureComponent } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { Dispatch } from '../types';
+import { connect } from '../react-redux';
+import { getLoading } from '../selectors';
+import { Label, LoadingIndicator } from '.';
+import type { ThemeColors } from '../styles';
+import { ThemeContext } from '../styles';
+
+const key = 'LoadingBanner';
+
+const styles = StyleSheet.create({
+  block: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'hsl(6, 98%, 57%)',
+  },
+  none: { display: 'none' },
+});
+
+type SelectorProps = $ReadOnly<{|
+  loading: boolean,
+|}>;
+
+type Props = $ReadOnly<{|
+  spinnerColor?: 'black' | 'white' | 'default',
+  textColor?: string,
+  backgroundColor?: string,
+
+  dispatch: Dispatch,
+  ...SelectorProps,
+|}>;
+
+/**
+ * Displays a notice that the app is connecting to the server.
+ * Rendered when session.loading is true (as of 2020/02, only
+ * during the /register request).
+ *
+ * @prop loading
+ */
+class LoadingBanner extends PureComponent<Props> {
+  static contextType = ThemeContext;
+  context: ThemeColors;
+
+  render() {
+    const {
+      loading,
+      spinnerColor = 'default',
+      textColor = this.context.color,
+      backgroundColor,
+    } = this.props;
+    if (!loading) {
+      return <View key={key} style={styles.none} />;
+    }
+    const style = {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: backgroundColor ?? this.context.backgroundColor,
+    };
+    return (
+      <View key={key} style={style}>
+        <View
+          /* eslint-disable react-native/no-inline-styles */
+          style={{ flexDirection: 'row', alignItems: 'center' }}
+        >
+          <View>
+            <LoadingIndicator size={14} color={spinnerColor} />
+          </View>
+          <Label
+            /* eslint-disable react-native/no-inline-styles */
+            style={{
+              fontSize: 14,
+              margin: 2,
+              color: textColor,
+            }}
+            text="Connecting..."
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+export default connect<SelectorProps, _, _>(state => ({
+  loading: getLoading(state),
+}))(LoadingBanner);