diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -55,7 +55,7 @@
 import useBadgeHandler from './push-notif/badge-handler.react.js';
 import { PushNotificationsHandler } from './push-notif/push-notifs-handler.js';
 import { updateNavInfoActionType } from './redux/action-types.js';
-import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler.js';
+import { DisconnectedBarVisibilityHandler } from './redux/disconnected-bar-visibility-handler.js';
 import DisconnectedBar from './redux/disconnected-bar.js';
 import FocusHandler from './redux/focus-handler.react.js';
 import { persistConfig } from './redux/persist.js';
diff --git a/web/redux/disconnected-bar-visibility-handler.js b/web/redux/disconnected-bar-visibility-handler.js
--- a/web/redux/disconnected-bar-visibility-handler.js
+++ b/web/redux/disconnected-bar-visibility-handler.js
@@ -4,7 +4,7 @@
 
 import { useDisconnectedBarVisibilityHandler } from 'lib/hooks/disconnected-bar.js';
 
-function useNetworkConnected() {
+function useNetworkConnected(): boolean {
   const [networkConnected, setNetworkConnected] = React.useState(true);
   React.useEffect(() => {
     if (!window) {
@@ -30,4 +30,4 @@
   return null;
 }
 
-export default DisconnectedBarVisibilityHandler;
+export { useNetworkConnected, DisconnectedBarVisibilityHandler };
diff --git a/web/redux/disconnected-bar.css b/web/redux/disconnected-bar.css
--- a/web/redux/disconnected-bar.css
+++ b/web/redux/disconnected-bar.css
@@ -8,12 +8,7 @@
   font-size: var(--m-font-16);
 }
 
-p.connecting {
+p.disconnected {
   background-color: var(--disconnected-bar-connecting-bg);
   color: var(--disconnected-bar-connecting-color);
 }
-
-p.disconnected {
-  background-color: var(--disconnected-bar-alert-bg);
-  color: var(--disconnected-bar-alert-color);
-}
diff --git a/web/redux/disconnected-bar.js b/web/redux/disconnected-bar.js
--- a/web/redux/disconnected-bar.js
+++ b/web/redux/disconnected-bar.js
@@ -3,29 +3,19 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import {
-  useShouldShowDisconnectedBar,
-  useDisconnectedBar,
-} from 'lib/hooks/disconnected-bar.js';
-
+import { useNetworkConnected } from './disconnected-bar-visibility-handler.js';
 import css from './disconnected-bar.css';
 
 function DisconnectedBar(): React.Node {
-  const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar();
-  const [showing, setShowing] = React.useState(shouldShowDisconnectedBar);
-
-  const barCause = useDisconnectedBar(setShowing);
-  const isDisconnected = barCause === 'disconnected';
-  const text = isDisconnected ? 'DISCONNECTED' : 'CONNECTING…';
-  if (!showing) {
+  const isNetworkConnected = useNetworkConnected();
+  if (isNetworkConnected) {
     return null;
   }
-
-  const textClasses = classNames(css.bar, {
-    [css.disconnected]: isDisconnected,
-    [css.connecting]: !isDisconnected,
+  const textClasses = classNames({
+    [css.bar]: true,
+    [css.disconnected]: !isNetworkConnected,
   });
-  return <p className={textClasses}>{text}</p>;
+  return <p className={textClasses}>{'DISCONNECTED'}</p>;
 }
 
 export default DisconnectedBar;