47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
|
|
import Layout from "@/features/core/components/layout";
|
|
import { useServerEvents } from "@/hooks/use-server-events";
|
|
import { Group, Skeleton, Stack } from "@mantine/core";
|
|
|
|
export const Route = createFileRoute("/_authed")({
|
|
beforeLoad: ({ context }) => {
|
|
if (!context.auth?.user) {
|
|
throw redirect({ to: "/login" });
|
|
}
|
|
|
|
return {
|
|
auth: {
|
|
...context.auth,
|
|
user: context.auth.user,
|
|
},
|
|
};
|
|
},
|
|
component: () => {
|
|
useServerEvents();
|
|
return (
|
|
<Layout>
|
|
<Outlet />
|
|
</Layout>
|
|
);
|
|
},
|
|
pendingComponent: () => (
|
|
<Layout>
|
|
<Stack gap="md" p="md" w="100%">
|
|
<Group gap="sm">
|
|
<Skeleton height={40} width={40} radius="sm" />
|
|
<Skeleton height={24} width="45%" radius="sm" />
|
|
</Group>
|
|
{Array.from({ length: 4 }).map((_, index) => (
|
|
<Skeleton
|
|
key={`authed-pending-${index}`}
|
|
height={96}
|
|
w="100%"
|
|
radius="md"
|
|
style={{ opacity: Math.max(1 - index * 0.18, 0.3) }}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Layout>
|
|
),
|
|
});
|