import { FC, PropsWithChildren } from "react";
import { Col, Row } from "reactstrap";
import { Code, List } from "react-content-loader";

const LoadingLayer: FC<PropsWithChildren> = ({ children }) => {
  return (
    <Row className="g-0">
      <Col className="m-1">{children}</Col>
    </Row>
  );
};

export const ForumsViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const ForumViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const HitViewLoading = () => {
  return <Code />;
};

export const LatestEssaysViewLoading = () => {
  return <Code />;
};

export const LatestCommentsViewLoading = () => {
  return <Code />;
};

export const LatestAvatarViewLoading = () => {
  return (
    <LoadingLayer>
      <Code />
    </LoadingLayer>
  );
};

export const AvatarViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const EssayViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const CommentaryViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const WantViewLoading = () => {
  return (
    <LoadingLayer>
      <List />
    </LoadingLayer>
  );
};

export const AutoEssayViewLoading = () => {
    return <List/>;
};