Community skeleton (#87)

packages/react-chat/src/components/Chat.tsx

@@ -13,6 +13,7 @@ import { ChatBody } from "./Chat/ChatBody";
 import { Community } from "./Community";
 import { Members } from "./Members/Members";
 import { CommunityModal } from "./Modals/CommunityModal";
+import { CommunitySkeleton } from "./Skeleton/CommunitySkeleton";
 
 interface ChatProps {
   theme: Theme;
@@ -92,7 +93,11 @@ export function Chat({ theme, communityKey, fetchMetadata }: ChatProps) {
     <ChatWrapper>
       {showChannels && !narrow && (
         <ChannelsWrapper>
+          {messenger ? (
             <StyledCommunity onClick={showModal} community={communityData} />
+          ) : (
+            <CommunitySkeleton />
+          )}
           <Channels
             notifications={notifications}
             clearNotifications={clearNotifications}

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -13,6 +13,7 @@ import { Community } from "../Community";
 import { MembersIcon } from "../Icons/MembersIcon";
 import { NarrowChannels } from "../NarrowMode/NarrowChannels";
 import { NarrowMembers } from "../NarrowMode/NarrowMembers";
+import { CommunitySkeleton } from "../Skeleton/CommunitySkeleton";
 import { Loading } from "../Skeleton/Loading";
 import { LoadingSkeleton } from "../Skeleton/LoadingSkeleton";
 
@@ -90,6 +91,8 @@ export function ChatBody({
         }
       >
         <ChannelWrapper className={className}>
+          {messenger ? (
+            <>
               {(showCommunity || narrow) && (
                 <CommunityWrap className={className}>
                   <Community onClick={onCommunityClick} community={community} />
@@ -102,7 +105,12 @@ export function ChatBody({
                 isMuted={false}
                 onClick={() => (narrow ? switchChannelList() : undefined)}
               />
+            </>
+          ) : (
+            <CommunitySkeleton />
+          )}
         </ChannelWrapper>
+
         <MemberBtn
           onClick={narrow ? () => switchMemberList() : onClick}
           className={

packages/react-chat/src/components/CommunityIdentity.tsx

@@ -31,7 +31,7 @@ const Row = styled.div`
   display: flex;
 `;
 
-const Column = styled.div`
+export const Column = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;

packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Column } from "../CommunityIdentity";
+
+import { Skeleton } from "./Skeleton";
+
+export const CommunitySkeleton = () => {
+  return (
+    <Loading>
+      <LogoSkeleton width="40px" height="40px" borderRadius="50%" />
+      <Column>
+        <Skeleton width="140px" height="16px" />
+        <Skeleton width="65px" height="16px" />
+      </Column>
+    </Loading>
+  );
+};
+
+const LogoSkeleton = styled(Skeleton)`
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+
+const Loading = styled.div`
+  display: flex;
+  padding: 0 0 0 10px;
+  margin: 0 0 16px;
+`;