import { List } from "react-content-loader"; import BarLoader from "react-spinners/BarLoader"; import { useTranslation } from "react-i18next"; import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap"; const LoadingLayer = ({ text }: { text: string }) => { return ( <Row className="g-0"> <Col className="m-1"> <ListGroup> <Badge>{text}</Badge> <ListGroupItem> <BarLoader width="100%" color="#36d7b7" /> </ListGroupItem> </ListGroup> </Col> </Row> ); }; export const TossViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toToss")} />; }; export const NoteViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toNote")} />; }; export const SiteViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toSite")} />; }; export const AvatarViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toAvatar")} />; }; export const HOFViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toHOF")} />; }; export const EtcViewLoading = () => { const { t } = useTranslation(); return <LoadingLayer text={t("toEtc")} />; }; export const NoteLoading = () => { return ( <ListGroupItem> <List /> </ListGroupItem> ); }; export const HOFLoading = () => { return ( <ListGroupItem> <BarLoader width="100%" color="#36d7b7" /> </ListGroupItem> ); }; export const AvatarLoading = () => { return ( <ListGroupItem> <BarLoader width="100%" color="#36d7b7" /> </ListGroupItem> ); };