rules, bracket page

src/app/routes/_authed/profile.$playerId.tsx

@@ -1,7 +1,10 @@
 import Profile from "@/features/players/components/profile";
+import HeaderSkeleton from "@/features/players/components/profile/header-skeleton";
+import ProfileSkeleton from "@/features/players/components/profile/skeleton";
 import { playerKeys, playerQueries } from "@/features/players/queries";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
 import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
 import { z } from "zod";
 
 const searchSchema = z.object({
@@ -35,6 +38,8 @@ export const Route = createFileRoute("/_authed/profile/$playerId")({
   }),
   component: () => {
     const { playerId } = Route.useParams();
-    return <Profile id={playerId} />;
+    return <Suspense fallback={<ProfileSkeleton />}>
+       <Profile id={playerId} />
+    </Suspense>;
   },
 });