upcoming tournament page, minor changes

src/components/sheet/drawer.tsx

@@ -1,8 +1,8 @@
-import { Box, Container, useComputedColorScheme } from "@mantine/core";
-import { PropsWithChildren, useEffect } from "react";
+import { Box, Container, Flex, Loader, useComputedColorScheme } from "@mantine/core";
+import { PropsWithChildren, Suspense, useEffect } from "react";
 import { Drawer as VaulDrawer } from "vaul";
-import { useMantineColorScheme } from "@mantine/core";
 import styles from "./styles.module.css";
+import FullScreenLoader from "../full-screen-loader";
 
 interface DrawerProps extends PropsWithChildren {
   title?: string;
@@ -76,7 +76,13 @@ const Drawer: React.FC<DrawerProps> = ({
             />
             <Container mah="fit-content" mx="auto" maw="28rem" px={0}>
               <VaulDrawer.Title>{title}</VaulDrawer.Title>
-              {children}
+              <Suspense fallback={
+                <Flex justify='center' align='center' w='100%' h={400}>
+                  <Loader size='lg' />
+                </Flex>
+              }>
+                {children}
+              </Suspense>
             </Container>
           </Container>
         </VaulDrawer.Content>

src/components/sheet/modal.tsx

@@ -1,5 +1,5 @@
-import { Modal as MantineModal, Title } from "@mantine/core";
-import { PropsWithChildren } from "react";
+import { Flex, Loader, Modal as MantineModal, Title } from "@mantine/core";
+import { PropsWithChildren, Suspense } from "react";
 
 interface ModalProps extends PropsWithChildren {
   title?: string;
@@ -13,7 +13,15 @@ const Modal: React.FC<ModalProps> = ({ title, children, opened, onClose }) => (
     onClose={onClose}
     title={<Title order={3}>{title}</Title>}
   >
-    {children}
+    <Suspense
+      fallback={
+        <Flex justify="center" align="center" w="100%" h={400}>
+          <Loader size="lg" />
+        </Flex>
+      }
+    >
+      {children}
+    </Suspense>
   </MantineModal>
 );
 

src/components/sheet/slide-panel/slide-panel.tsx

@@ -17,6 +17,7 @@ interface SlidePanelProps {
   onCancel?: () => void;
   submitText?: string;
   cancelText?: string;
+  cancelColor?: string;
   maxHeight?: string;
   formProps?: Record<string, any>;
   loading?: boolean;
@@ -28,6 +29,7 @@ const SlidePanel = ({
   onCancel,
   submitText = "Submit",
   cancelText = "Cancel",
+  cancelColor = "red",
   maxHeight = "70vh",
   formProps = {},
   loading = false,
@@ -114,7 +116,7 @@ const SlidePanel = ({
                 {onCancel && (
                   <Button
                     variant="subtle"
-                    color="red"
+                    color={cancelColor}
                     fullWidth
                     onClick={onCancel}
                     type="button"