ksv741
4e5f564fa1
Consume the provided resource-envelope API snapshot. Preserve financial snapshots during refresh, observe synchronization without importing, and fence late responses across account and connection changes.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Card, Group, SimpleGrid, Skeleton, Stack } from "@mantine/core";
|
|
import { LoadingSkeleton } from "@wealthledger/ui";
|
|
import type { FC } from "react";
|
|
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 cols={1} spacing="lg" aria-hidden="true">
|
|
{[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 };
|