diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index 86790cee..8928643b 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/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) { {showChannels && !narrow && ( - + {messenger ? ( + + ) : ( + + )} - {(showCommunity || narrow) && ( - - - + {messenger ? ( + <> + {(showCommunity || narrow) && ( + + + + )} + (narrow ? switchChannelList() : undefined)} + /> + + ) : ( + )} - (narrow ? switchChannelList() : undefined)} - /> + switchMemberList() : onClick} className={ diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx index 4848b738..06e7c2e8 100644 --- a/packages/react-chat/src/components/CommunityIdentity.tsx +++ b/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; diff --git a/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx b/packages/react-chat/src/components/Skeleton/CommunitySkeleton.tsx new file mode 100644 index 00000000..c44f3f64 --- /dev/null +++ b/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 ( + + + + + + + + ); +}; + +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; +`;