diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
index d448170c2..b6c8479e0 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
@@ -28,6 +28,7 @@ import {
MedicineBoxOutlined,
RocketOutlined,
BugOutlined,
+ WarningOutlined,
} from '@ant-design/icons';
import {SidebarLeft, SidebarRight} from './SandyIcons';
import {useDispatch, useStore} from '../utils/useStore';
@@ -78,7 +79,7 @@ import {css} from '@emotion/css';
import {getRenderHostInstance} from 'flipper-frontend-core';
import {StyleGuide} from './StyleGuide';
import {useEffect} from 'react';
-import {isLoggedIn} from '../fb-stubs/user';
+import {isConnected, isLoggedIn} from '../fb-stubs/user';
const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
width: kind === 'small' ? 32 : 36,
@@ -205,7 +206,7 @@ export const LeftRail = withTrackingScope(function LeftRail({
- {config.showLogin && }
+ {config.showLogin && }
@@ -587,7 +588,7 @@ function SetupDoctorButton() {
);
}
-function LoginButton() {
+function LoginConnectivityButton() {
const dispatch = useDispatch();
const loggedIn = useValue(isLoggedIn());
const user = useStore((state) => state.user);
@@ -599,6 +600,20 @@ function LoginButton() {
[],
);
+ const connected = useValue(isConnected());
+
+ if (!connected) {
+ return (
+
+
+
+ );
+ }
+
return loggedIn ? (