style upgrades

src/app/routes/_authed.tsx

@@ -1,7 +1,7 @@
 import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
 import Layout from "@/features/core/components/layout";
 import { useServerEvents } from "@/hooks/use-server-events";
-import { Flex, Loader } from "@mantine/core";
+import { Group, Skeleton, Stack } from "@mantine/core";
 
 export const Route = createFileRoute("/_authed")({
   beforeLoad: ({ context }) => {
@@ -26,9 +26,21 @@ export const Route = createFileRoute("/_authed")({
   },
   pendingComponent: () => (
     <Layout>
-      <Flex w='100%' h="40dvh" justify="center" align="flex-end">
-        <Loader size='xl' />
-      </Flex>
+      <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>
   ),
 });