From f5a019e02adc607b5f681e321000bfd918d0191b Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 11 Feb 2022 15:13:10 +0100
Subject: [PATCH] Connection State: Do not duplicate Chat List spinner

---
 src/components/left/main/LeftMainHeader.tsx | 14 +++++++++-----
 src/hooks/useConnectionStatus.ts            |  3 ++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx
index b1c73c9d6..1f5e785cc 100644
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/src/components/left/main/LeftMainHeader.tsx
@@ -54,8 +54,9 @@ type StateProps =
     theme: ISettings['theme'];
     animationLevel: 0 | 1 | 2;
     chatsById?: Record<string, ApiChat>;
-    isConnectionStatusMinimized: ISettings['isConnectionStatusMinimized'];
     isMessageListOpen: boolean;
+    isConnectionStatusMinimized: ISettings['isConnectionStatusMinimized'];
+    areChatsLoaded?: boolean;
   }
   & Pick<GlobalState, 'connectionState' | 'isSyncing'>;
 
@@ -84,14 +85,16 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
   chatsById,
   connectionState,
   isSyncing,
-  isConnectionStatusMinimized,
   isMessageListOpen,
+  isConnectionStatusMinimized,
+  areChatsLoaded,
 }) => {
   const {
     openChat,
     openTipsChat,
     setGlobalSearchDate,
-    setSettingOption, setGlobalSearchChatId,
+    setSettingOption,
+    setGlobalSearchChatId,
   } = getDispatch();
 
   const lang = useLang();
@@ -118,7 +121,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
   }, [hasMenu, chatsById]);
 
   const { connectionStatus, connectionStatusText, connectionStatusPosition } = useConnectionStatus(
-    lang, connectionState, isSyncing, isMessageListOpen, isConnectionStatusMinimized,
+    lang, connectionState, isSyncing, isMessageListOpen, isConnectionStatusMinimized, !areChatsLoaded,
   );
 
   const withOtherVersions = window.location.hostname === PRODUCTION_HOSTNAME;
@@ -361,8 +364,9 @@ export default memo(withGlobal<OwnProps>(
       animationLevel,
       connectionState,
       isSyncing,
-      isConnectionStatusMinimized,
       isMessageListOpen: Boolean(selectCurrentMessageList(global)),
+      isConnectionStatusMinimized,
+      areChatsLoaded: Boolean(global.chats.listIds.active),
     };
   },
 )(LeftMainHeader));
diff --git a/src/hooks/useConnectionStatus.ts b/src/hooks/useConnectionStatus.ts
index 4a0b73b31..b3c9e8954 100644
--- a/src/hooks/useConnectionStatus.ts
+++ b/src/hooks/useConnectionStatus.ts
@@ -21,6 +21,7 @@ export default function useConnectionStatus(
   isSyncing: GlobalState['isSyncing'],
   hasMiddleHeader: boolean,
   isMinimized?: boolean,
+  isDisabled?: boolean,
 ) {
   let status: ConnectionStatus;
   const isBrowserOnline = useBrowserOnline();
@@ -33,7 +34,7 @@ export default function useConnectionStatus(
   }
 
   let position: ConnectionStatusPosition;
-  if (status === ConnectionStatus.online) {
+  if (status === ConnectionStatus.online || isDisabled) {
     position = 'none';
   } else if (hasMiddleHeader) {
     position = 'middleHeader';