significant refactor

src/app/routes/__root.tsx

@@ -1,59 +1,63 @@
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-import '@mantine/carousel/styles.css';
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "@mantine/carousel/styles.css";
 import {
   HeadContent,
   Navigate,
   Outlet,
   Scripts,
-  createRootRouteWithContext
-} from '@tanstack/react-router'
-import * as React from 'react'
-import { DefaultCatchBoundary } from '@/components/DefaultCatchBoundary'
-import { type QueryClient } from '@tanstack/react-query'
-import { ensureSuperTokensFrontend } from '@/lib/supertokens/client'
-import { AuthContextType, authQueryConfig } from '@/contexts/auth-context'
-import Providers from '@/features/core/components/providers'
-import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
-import { HeaderConfig } from '@/features/core/types/header-config';
+  createRootRouteWithContext,
+} from "@tanstack/react-router";
+import * as React from "react";
+import { DefaultCatchBoundary } from "@/components/DefaultCatchBoundary";
+import { type QueryClient } from "@tanstack/react-query";
+import { ensureSuperTokensFrontend } from "@/lib/supertokens/client";
+import { AuthContextType } from "@/contexts/auth-context";
+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";
 
 export const Route = createRootRouteWithContext<{
-  queryClient: QueryClient,
-  auth: AuthContextType,
-  header: HeaderConfig,
-  refresh: string[]
-  withPadding: boolean
+  queryClient: QueryClient;
+  auth: AuthContextType;
+  header: HeaderConfig;
+  refresh: string[];
+  withPadding: boolean;
 }>()({
   head: () => ({
     meta: [
       {
-        charSet: 'utf-8'
+        charSet: "utf-8",
       },
       {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content',
-      }
+        name: "viewport",
+        content:
+          "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=overlays-content",
+      },
     ],
     links: [
       {
-        rel: 'apple-touch-icon',
-        sizes: '180x180',
-        href: '/apple-touch-icon.png',
+        rel: "apple-touch-icon",
+        sizes: "180x180",
+        href: "/apple-touch-icon.png",
       },
       {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '32x32',
-        href: '/favicon-32x32.png',
+        rel: "icon",
+        type: "image/png",
+        sizes: "32x32",
+        href: "/favicon-32x32.png",
       },
       {
-        rel: 'icon',
-        type: 'image/png',
-        sizes: '16x16',
-        href: '/favicon-16x16.png',
+        rel: "icon",
+        type: "image/png",
+        sizes: "16x16",
+        href: "/favicon-16x16.png",
       },
-      { rel: 'manifest', href: '/site.webmanifest' },
-      { rel: 'icon', href: '/favicon.ico' },
+      { rel: "manifest", href: "/site.webmanifest" },
+      { rel: "icon", href: "/favicon.ico" },
     ],
   }),
   errorComponent: (props) => {
@@ -61,25 +65,24 @@ export const Route = createRootRouteWithContext<{
       <RootDocument>
         <DefaultCatchBoundary {...props} />
       </RootDocument>
-    )
+    );
   },
   component: RootComponent,
   notFoundComponent: () => <Navigate to="/" />,
   beforeLoad: async ({ context }) => {
-    // I don't really like this. I wish there was some way before the router is rendered to useAuth() and pass context there.
-    // See: https://github.com/TanStack/router/discussions/3531
-    const auth = await context.queryClient.ensureQueryData(authQueryConfig)
-    return {
-      auth
-    };
-  }
-})
+    const auth = await ensureServerQueryData(
+      context.queryClient,
+      playerQueries.auth()
+    );
+    return { auth };
+  },
+  pendingComponent: () => <p>Loading...</p>,
+});
 
 function RootComponent() {
-
   React.useEffect(() => {
-    ensureSuperTokensFrontend()
-  }, [])
+    ensureSuperTokensFrontend();
+  }, []);
 
   return (
     <RootDocument>
@@ -87,25 +90,38 @@ function RootComponent() {
         <Outlet />
       </Providers>
     </RootDocument>
-  )
+  );
 }
 
 // todo: analytics -> process.env data-website-id
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html {...mantineHtmlProps} style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'fixed', width: '100%' }}>
+    <html
+      {...mantineHtmlProps}
+      style={{
+        overflowX: "hidden",
+        overflowY: "hidden",
+        position: "fixed",
+        width: "100%",
+      }}
+    >
       <head>
         <HeadContent />
         <ColorSchemeScript />
         <link rel="stylesheet" href="/styles.css" />
-        <script defer src="https://analytics.yohler.net/script.js" data-website-id="0280f304-17a6-400c-8021-4d83a62d0c1b"></script>
       </head>
-      <body style={{ overflowX: 'hidden', overflowY: 'hidden', position: 'fixed', width: '100%' }}>
-        <div className='app'>
-          {children}
-        </div>
+      <body
+        style={{
+          overflowX: "hidden",
+          overflowY: "hidden",
+          position: "fixed",
+          width: "100%",
+        }}
+      >
+        <div className="app">{children}</div>
         <Scripts />
+        <ReactQueryDevtools />
       </body>
     </html>
-  )
+  );
 }