trampa-frontend/src/components/DirectChat/SkeletonDirectChat/SkeletonDirectChat.js

import React from "react";
import {
  SkeletonDirectChatContainer,
  SkeletonDirectChatFirstColumn,
  SkeletonDirectChatFirstLine,
  SkeletonDirectChatFourthLine,
  SkeletonDirectChatFourthLineContainer,
  SkeletonDirectChatHeading,
  SkeletonDirectChatImage,
  SkeletonDirectChatRoundImage,
  SkeletonDirectChatSecondColumn,
  SkeletonDirectChatSecondColumnFirstLine,
  SkeletonDirectChatSecondColumnSecondLine,
  SkeletonDirectChatSecondLine,
  SkeletonDirectChatThirdColumn,
  SkeletonDirectChatThirdColumnSecondLine,
  SkeletonDirectChatThirdColumnSecondLineInside,
  SkeletonDirectChatThirdLine,
  SkeletonDirectChatVerticalLine,
} from "./SkeletonDirectChat.styled";

const SkeletonDirectChat = () => {
  return (
    <>
      <SkeletonDirectChatHeading />
      <SkeletonDirectChatContainer>
        <SkeletonDirectChatImage />
        <SkeletonDirectChatFirstColumn>
          <SkeletonDirectChatFirstLine />
          <SkeletonDirectChatSecondLine />
          <SkeletonDirectChatThirdLine />
          <SkeletonDirectChatFourthLineContainer>
            <SkeletonDirectChatFourthLine />
            <SkeletonDirectChatFourthLine />
            <SkeletonDirectChatFourthLine />
          </SkeletonDirectChatFourthLineContainer>
        </SkeletonDirectChatFirstColumn>
        <SkeletonDirectChatVerticalLine />
        <SkeletonDirectChatSecondColumn>
          <SkeletonDirectChatSecondColumnFirstLine />
          <SkeletonDirectChatSecondColumnSecondLine />
          <SkeletonDirectChatSecondColumnSecondLine />
          <SkeletonDirectChatSecondColumnSecondLine />
          <SkeletonDirectChatSecondColumnSecondLine />
        </SkeletonDirectChatSecondColumn>
        <SkeletonDirectChatThirdColumn>
          <SkeletonDirectChatRoundImage />
          <SkeletonDirectChatThirdColumnSecondLine>
            <SkeletonDirectChatThirdColumnSecondLineInside />
          </SkeletonDirectChatThirdColumnSecondLine>
        </SkeletonDirectChatThirdColumn>
      </SkeletonDirectChatContainer>
    </>
  );
};

export default SkeletonDirectChat;