perf upgrade

src/features/tournaments/components/upcoming-tournament/rules-content.tsx

@@ -0,0 +1,24 @@
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor } from '@mantine/tiptap';
+
+interface RulesContentProps {
+  content: string;
+}
+
+const RulesContent = ({ content }: RulesContentProps) => {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content,
+    editable: false,
+    immediatelyRender: false,
+  });
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+};
+
+export default RulesContent;

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -3,10 +3,10 @@ import Sheet from "@/components/sheet/sheet"
 import { useSheet } from "@/hooks/use-sheet"
 import { ListIcon } from "@phosphor-icons/react"
 import { useTournament } from "../../queries"
-import { useEditor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { RichTextEditor } from '@mantine/tiptap';
-import { Button, Stack } from "@mantine/core"
+import { Button, Flex, Loader, Stack } from "@mantine/core"
+import { lazy, Suspense } from "react"
+
+const RulesContent = lazy(() => import("./rules-content"));
 
 interface RulesListButtonProps {
   tournamentId: string;
@@ -16,13 +16,6 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
   const { data: tournament } = useTournament(tournamentId);
   const { open, isOpen, toggle } = useSheet();
 
-  const editor = useEditor({
-    extensions: [StarterKit],
-    content: tournament?.rules || '',
-    editable: false,
-    immediatelyRender: false,
-  });
-
   return (
     <>
       <ListButton
@@ -33,9 +26,15 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
 
       <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
         <Stack gap="xs">
-          <RichTextEditor editor={editor}>
-            <RichTextEditor.Content />
-          </RichTextEditor>
+          <Suspense
+            fallback={
+              <Flex justify="center" align="center" w="100%" style={{ minHeight: '25vh' }}>
+                <Loader size="lg" />
+              </Flex>
+            }
+          >
+            <RulesContent content={tournament?.rules || ''} />
+          </Suspense>
           <Button variant="subtle" c="red" onClick={toggle}>Close</Button>
         </Stack>
       </Sheet>
@@ -43,4 +42,4 @@ const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
   )
 }
 
-export default RulesListButton;
+export default RulesListButton;

src/features/tournaments/server.ts

@@ -17,14 +17,14 @@ export const listTournaments = createServerFn()
   );
 
 export const createTournament = createServerFn()
-  .inputValidator(tournamentInputSchema)
+  .validator(tournamentInputSchema)
   .middleware([superTokensAdminFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ data }) => 
     toServerResult(() => pbAdmin.createTournament(data))
   );
 
 export const updateTournament = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     id: z.string(),
     updates: tournamentInputSchema.partial()
   }))
@@ -34,7 +34,7 @@ export const updateTournament = createServerFn()
   );
 
 export const getTournament = createServerFn()
-  .inputValidator(z.string())
+  .validator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: tournamentId, context }) => {
     const isAdmin = context.roles.includes("Admin");
@@ -47,7 +47,7 @@ export const getCurrentTournament = createServerFn()
   );
 
 export const enrollTeam = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
     teamId: z.string()
   }))
@@ -81,7 +81,7 @@ export const enrollTeam = createServerFn()
   );
 
 export const unenrollTeam = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
     teamId: z.string()
   }))
@@ -91,21 +91,21 @@ export const unenrollTeam = createServerFn()
   );
 
 export const getUnenrolledTeams = createServerFn()
-  .inputValidator(z.string())
+  .validator(z.string())
   .middleware([superTokensAdminFunctionMiddleware])
   .handler(async ({ data: tournamentId }) => 
     toServerResult(() => pbAdmin.getUnenrolledTeams(tournamentId))
   );
 
 export const getFreeAgents = createServerFn()
-  .inputValidator(z.string())
+  .validator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: tournamentId }) => 
     toServerResult(() => pbAdmin.getFreeAgents(tournamentId))
   );
 
 export const enrollFreeAgent = createServerFn()
-  .inputValidator(z.object({ phone: z.string(), tournamentId: z.string() }))
+  .validator(z.object({ phone: z.string(), tournamentId: z.string() }))
   .middleware([superTokensFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ context, data }) =>
     toServerResult(async () => {
@@ -119,7 +119,7 @@ export const enrollFreeAgent = createServerFn()
   );
 
 export const unenrollFreeAgent = createServerFn()
-  .inputValidator(z.object({ tournamentId: z.string() }))
+  .validator(z.object({ tournamentId: z.string() }))
   .middleware([superTokensFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ context, data }) =>
     toServerResult(async () => {
@@ -133,7 +133,7 @@ export const unenrollFreeAgent = createServerFn()
   );
 
 export const generateRandomTeams = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
     seed: z.number().optional()
   }))
@@ -313,7 +313,7 @@ export const generateRandomTeams = createServerFn()
   );
 
 export const confirmTeamAssignments = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
     assignments: z.array(z.object({
       player1Id: z.string(),
@@ -503,14 +503,14 @@ async function calculateGroupStandings(groupId: string): Promise<GroupStanding[]
 }
 
 export const getGroupStandings = createServerFn()
-  .inputValidator(z.string())
+  .validator(z.string())
   .middleware([superTokensFunctionMiddleware])
   .handler(async ({ data: groupId }) =>
     toServerResult(() => calculateGroupStandings(groupId))
   );
 
 export const generateKnockoutBracket = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
   }))
   .middleware([superTokensAdminFunctionMiddleware, serverFnLoggingMiddleware])
@@ -711,7 +711,7 @@ export const generateKnockoutBracket = createServerFn()
   );
 
 export const adminEnrollPlayer = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     playerId: z.string(),
     tournamentId: z.string()
   }))
@@ -724,7 +724,7 @@ export const adminEnrollPlayer = createServerFn()
   );
 
 export const adminUnenrollPlayer = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     playerId: z.string(),
     tournamentId: z.string()
   }))
@@ -737,7 +737,7 @@ export const adminUnenrollPlayer = createServerFn()
   );
 
 export const generateGroupStage = createServerFn()
-  .inputValidator(z.object({
+  .validator(z.object({
     tournamentId: z.string(),
     groupConfig: z.object({
       num_groups: z.number(),