free agents

src/app/routes/__root.tsx

@@ -1,7 +1,3 @@
-import "@mantine/core/styles.css";
-import "@mantine/dates/styles.css";
-import "@mantine/carousel/styles.css";
-import '@mantine/tiptap/styles.css';
 import {
   HeadContent,
   Navigate,
@@ -18,9 +14,12 @@ import Providers from "@/features/core/components/providers";
 import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
 import { HeaderConfig } from "@/features/core/types/header-config";
 import { playerQueries } from "@/features/players/queries";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import FullScreenLoader from "@/components/full-screen-loader";
+import mantineCssUrl from '@mantine/core/styles.css?url'
+import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
+import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
+import mantineTiptapCssUrl from '@mantine/tiptap/styles.css?url'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
@@ -61,6 +60,10 @@ export const Route = createRootRouteWithContext<{
       },
       { rel: "manifest", href: "/site.webmanifest" },
       { rel: "icon", href: "/favicon.ico" },
+      { rel: 'stylesheet', href: mantineCssUrl },
+      { rel: 'stylesheet', href: mantineCarouselCssUrl },
+      { rel: 'stylesheet', href: mantineDatesCssUrl },
+      { rel: 'stylesheet', href: mantineTiptapCssUrl }
     ],
   }),
   errorComponent: (props) => {
@@ -131,7 +134,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
       >
         <div className="app">{children}</div>
         <Scripts />
-        <ReactQueryDevtools />
       </body>
     </html>
   );

src/app/routes/_authed/index.tsx

@@ -3,9 +3,13 @@ import { tournamentQueries, useCurrentTournament } from "@/features/tournaments/
 import UpcomingTournament from "@/features/tournaments/components/upcoming-tournament";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import StartedTournament from "@/features/tournaments/components/started-tournament";
+import { Suspense } from "react";
+import UpcomingTournamentSkeleton from "@/features/tournaments/components/upcoming-tournament/skeleton";
 
 export const Route = createFileRoute("/_authed/")({
-  component: Home,
+  component: () => <Suspense fallback={<UpcomingTournamentSkeleton />}>
+    <Home />
+  </Suspense>,
   beforeLoad: async ({ context }) => {
     const queryClient = context.queryClient;
     const tournament = await ensureServerQueryData(queryClient, tournamentQueries.current())
@@ -18,6 +22,7 @@ export const Route = createFileRoute("/_authed/")({
       title: context.tournament.name || "FLXN"
     }
   }),
+  pendingComponent: () => <UpcomingTournamentSkeleton />
 });
 
 function Home() {

src/app/routes/_authed/stats.tsx

@@ -7,7 +7,7 @@ export const Route = createFileRoute("/_authed/stats")({
   component: Stats,
   beforeLoad: async ({ context }) => {
     const queryClient = context.queryClient;
-    await ensureServerQueryData(queryClient, playerQueries.allStats());
+    ensureServerQueryData(queryClient, playerQueries.allStats());
   },
   loader: () => ({
     withPadding: false,

src/app/routes/_authed/teams.$teamId.tsx

@@ -1,8 +1,7 @@
 import TeamProfile from "@/features/teams/components/team-profile";
 import { teamKeys, teamQueries } from "@/features/teams/queries";
-import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
 import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
-import { redirect, createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 import { z } from "zod";
 
 const searchSchema = z.object({