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;