90 lines
1.9 KiB
TypeScript
90 lines
1.9 KiB
TypeScript
import type { FC, PropsWithChildren } from "react";
|
|
|
|
import { Container, Group, Skeleton, Stack } from "@mantine/core";
|
|
import { Suspense } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { RouteTransition } from "./RouteTransition";
|
|
|
|
type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;
|
|
|
|
type RouteSkeletonVariant = "auth"
|
|
| "content"
|
|
| "shell";
|
|
|
|
const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
|
|
const { variant } = props;
|
|
const { t } = useTranslation();
|
|
|
|
if (variant === "auth")
|
|
return (
|
|
<Container py="xl" size={420}>
|
|
<Stack
|
|
aria-busy="true"
|
|
aria-label={t("states.loadingTitle")}
|
|
role="status"
|
|
>
|
|
<Skeleton height={32} width="45%" />
|
|
|
|
<Skeleton height={48} radius="sm" />
|
|
|
|
<Skeleton height={48} radius="sm" />
|
|
|
|
<Skeleton height={36} radius="sm" />
|
|
</Stack>
|
|
</Container>
|
|
);
|
|
|
|
if (variant === "shell")
|
|
return (
|
|
<Stack
|
|
aria-busy="true"
|
|
aria-label={t("states.loadingTitle")}
|
|
gap={0}
|
|
role="status"
|
|
>
|
|
<Group justify="space-between" p="md">
|
|
<Skeleton height={28} width={160} />
|
|
|
|
<Skeleton height={28} width={96} />
|
|
</Group>
|
|
|
|
<Container fluid p="md">
|
|
<Skeleton height={20} width="30%" />
|
|
|
|
<Stack mt="lg">
|
|
<Skeleton height={32} width="30%" />
|
|
|
|
<Skeleton height={160} radius="md" />
|
|
</Stack>
|
|
</Container>
|
|
</Stack>
|
|
);
|
|
|
|
return (
|
|
<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
|
|
<Skeleton height={32} width="30%" />
|
|
|
|
<Skeleton height={160} radius="md" />
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const LazyPage: FC<LazyPageProps> = (props) => {
|
|
const { children, variant } = props;
|
|
|
|
return (
|
|
<Suspense fallback={<RouteSkeleton variant={variant} />}>
|
|
{variant === "shell"
|
|
? (
|
|
children
|
|
)
|
|
: (
|
|
<RouteTransition>{children}</RouteTransition>
|
|
)}
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export { LazyPage, RouteSkeleton };
|