diff --git a/src/common/LoadingBanner.js b/src/common/LoadingBanner.js
new file mode 100644
index 00000000000..9f75daa6540
--- /dev/null
+++ b/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);
diff --git a/src/common/index.js b/src/common/index.js
index 7186a688ba6..1e7592322f8 100644
--- a/src/common/index.js
+++ b/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';