feat(ui): more improvements to initial loading state

web/.stylelintrc.json

@@ -2,6 +2,7 @@
 	"extends": "stylelint-config-standard-scss",
 	"rules": {
 		"selector-class-pattern": null,
-		"no-descending-specificity": null
+		"no-descending-specificity": null,
+		"selector-pseudo-class-no-unknown": null
 	}
 }

web/components/stores/ClientConfigStore.tsx

@@ -412,6 +412,14 @@ export const ClientConfigStore: FC = () => {
     } catch (e) {
       console.error('error parsing status hydration', e);
     }
+
+    try {
+      if ((window as any).configHydration && (window as any).statusHydration) {
+        sendEvent([AppStateEvent.Loaded]);
+      }
+    } catch (e) {
+      console.error('error sending loaded event', e);
+    }
   }, []);
 
   useEffect(() => {

web/components/ui/Content/Content.module.scss

@@ -65,7 +65,7 @@
   }
 }
 
-//not sure if this is needed
+// not sure if this is needed
 .statusBar {
   flex-shrink: 0;
 }
@@ -99,10 +99,6 @@
   }
 }
 
-.offlineBanner {
-  color: var(--theme-color-background-main);
-}
-
 .floatingMobileChatModalButton {
   position: fixed;
   width: 100px;
@@ -116,3 +112,10 @@
   border-width: 0;
   box-shadow: 0 1px 3px 1px rgb(0 0 0 / 20%);
 }
+
+.centerSpinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Skeleton, Col, Row, Button } from 'antd';
+import { Skeleton, Col, Row, Button, Spin } from 'antd';
 import MessageFilled from '@ant-design/icons/MessageFilled';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
@@ -194,7 +194,12 @@ export const Content: FC = () => {
     <>
       <>
         {appState.appLoading && (
-          <div className={styles.topSectionElement} style={{ height: '30vh' }} />
+          <div
+            className={classnames([styles.topSectionElement, styles.centerSpinner])}
+            style={{ height: '30vh' }}
+          >
+            <Spin delay={2} size="large" tip="One moment..." />
+          </div>
         )}
         {showChat && !isMobile && <Sidebar />}
         <Row>
@@ -262,6 +267,7 @@ export const Content: FC = () => {
           <BrowserNotifyModal />
         </Modal>
         <Row>
+          {!name && <Skeleton active loading style={{ marginLeft: '10vw', marginRight: '10vw' }} />}
           {isMobile ? (
             <Col span={24}>
               <MobileContent