Banned and chat disconnected states will hide chat. Closes #2764

web/components/ui/Content/Content.tsx

@@ -199,7 +199,7 @@ export const Content: FC = () => {
     setSupportsBrowserNotifications(isPushNotificationSupported() && browserNotificationsEnabled);
   }, [browserNotificationsEnabled]);
 
-  const showChat = !chatDisabled && isChatAvailable && isChatVisible;
+  const showChat = online && !chatDisabled && isChatVisible;
 
   return (
     <>

web/components/ui/Sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@ import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
+import { Spin } from 'antd';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import styles from './Sidebar.module.scss';
 
@@ -25,7 +26,11 @@ export const Sidebar: FC = () => {
   const isChatAvailable = useRecoilValue(isChatAvailableSelector);
 
   if (!currentUser) {
-    return <Sider className={styles.root} collapsedWidth={0} width={320} />;
+    return (
+      <Sider className={styles.root} collapsedWidth={0} width={320}>
+        <Spin spinning size="large" />
+      </Sider>
+    );
   }
 
   const { id, isModerator, displayName } = currentUser;
@@ -37,6 +42,7 @@ export const Sidebar: FC = () => {
         chatUserId={id}
         isModerator={isModerator}
         chatAvailable={isChatAvailable}
+        showInput={!!currentUser}
       />
     </Sider>
   );