48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import type { FC } from "react";
|
|
|
|
import { Card, Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const AccountsPageLoading: FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<LoadingSkeleton label={t("states.loadingTitle")}>
|
|
<Skeleton height={32} width="30%" />
|
|
|
|
<Skeleton height={20} width="45%" />
|
|
|
|
<SimpleGrid aria-hidden="true" cols={1} spacing="lg">
|
|
{[0, 1].map(index => (
|
|
<Card key={index} padding="xl" radius="lg" withBorder>
|
|
<Stack gap="xl">
|
|
<Stack gap="sm">
|
|
<Skeleton height={24} width="35%" />
|
|
|
|
<Skeleton height={28} width="65%" />
|
|
</Stack>
|
|
|
|
<Stack gap="xs">
|
|
<Skeleton height={16} width="30%" />
|
|
|
|
<Skeleton height={40} width="60%" />
|
|
</Stack>
|
|
|
|
<Group grow>
|
|
<Skeleton height={56} />
|
|
|
|
<Skeleton height={56} />
|
|
</Group>
|
|
|
|
<Skeleton height={20} />
|
|
</Stack>
|
|
</Card>
|
|
))}
|
|
</SimpleGrid>
|
|
</LoadingSkeleton>
|
|
);
|
|
};
|
|
|
|
export { AccountsPageLoading };
|