45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Paper, SimpleGrid, Skeleton } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import classes from "../../AccountPage.module.css";
|
|
|
|
const AccountPageLoading: FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<LoadingSkeleton label={t("states.loadingTitle")}>
|
|
<Skeleton height={32} width="35%" />
|
|
|
|
<SimpleGrid
|
|
aria-hidden="true"
|
|
cols={{ base: 1, md: 3, sm: 2 }}
|
|
spacing={10}
|
|
>
|
|
{["first", "second", "third"].map(placeholder => (
|
|
<Paper className={classes.total} key={placeholder} withBorder>
|
|
<Skeleton height={24} radius={4} width={40} />
|
|
|
|
<Skeleton
|
|
className={classes.totalAmountSkeleton}
|
|
height={21}
|
|
radius={4}
|
|
width={180}
|
|
/>
|
|
</Paper>
|
|
))}
|
|
</SimpleGrid>
|
|
|
|
<Skeleton height={260} radius="sm" />
|
|
|
|
<Skeleton height={40} radius="sm" />
|
|
|
|
<Skeleton height={220} radius="sm" />
|
|
</LoadingSkeleton>
|
|
);
|
|
};
|
|
|
|
export { AccountPageLoading };
|