import BarLoader from "react-spinners/BarLoader"; import { useTranslation } from "react-i18next"; import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap"; import NoteItem from "src/note/NoteItem"; import AvatarItem from "src/hof/AvatarItem"; import WwwLevelItem from "src/avatar/WwwLevelItem"; 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 = ({ loadingCount }: { loadingCount: number }) => { return [...Array(loadingCount).keys()].map(() => ( <NoteItem noteID="" artist="" title="Loading…" genre="" levelText="" level={0} /> )); }; export const AvatarWwwLevelLoading = ({ loadingCount, }: { loadingCount: number; }) => { return [...Array(loadingCount).keys()].map(() => ( <WwwLevelItem levelID="" title="Loading…" date={0} levelText="" level="" /> )); }; export const HOFAvatarLoading = ({ loadingCount, }: { loadingCount: number; }) => { return [...Array(loadingCount).keys()].map(() => ( <AvatarItem avatarID="" avatarName="Loading…" text="" /> )); };