LoadingBanner: Add, to show loading state and stale data simultaneously.

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,81 @@
+/* @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,
+|}>;
+
+/**
+ * Display a notice that the app is connecting to the server, when appropriate.
+ */
+class LoadingBanner extends PureComponent<Props> {
+  static contextType = ThemeContext;
+  context: ThemeColors;
+
+  render() {
+    if (!this.props.loading) {
+      return <View key={key} style={styles.none} />;
+    }
+    const {
+      spinnerColor = 'default',
+      textColor = this.context.color,
+      backgroundColor = this.context.backgroundColor,
+    } = this.props;
+    const style = {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor,
+    };
+    return (
+      <View key={key} style={style}>
+        <View>
+          <LoadingIndicator size={14} color={spinnerColor} />
+        </View>
+        <Label
+          style={{
+            fontSize: 14,
+            margin: 2,
+            color: textColor,
+          }}
+          text="Connecting..."
+        />
+      </View>
+    );
+  }
+}
+
+export default connect<SelectorProps, _, _>(state => ({
+  loading: getLoading(state),
+}))(LoadingBanner);

src/common/index.js

@@ -15,6 +15,7 @@ export { default as KeyboardAvoider } from './KeyboardAvoider';
 export { default as Label } from './Label';
 export { default as LineSeparator } from './LineSeparator';
 export { default as LoadingIndicator } from './LoadingIndicator';
+export { default as LoadingBanner } from './LoadingBanner';
 export { default as Logo } from './Logo';
 export { default as OfflineNotice } from './OfflineNotice';
 export { default as OptionButton } from './OptionButton';