skeleton for h2h

src/components/sheet/sheet.tsx

@@ -1,8 +1,8 @@
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren, Suspense, useCallback } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import Drawer from "./drawer";
 import Modal from "./modal";
-import { ScrollArea } from "@mantine/core";
+import { ScrollArea, Flex, Loader } from "@mantine/core";
 
 interface SheetProps extends PropsWithChildren {
   title?: string;
@@ -16,6 +16,8 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
 
   const SheetComponent = isMobile ? Drawer : Modal;
 
+  if (!opened) return null;
+
   return (
     <SheetComponent
       title={title}
@@ -23,14 +25,20 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
       onChange={onChange}
       onClose={handleClose}
     >
-      <ScrollArea.Autosize
-        style={{ flex: 1, maxHeight: '75dvh' }}
-        scrollbarSize={8}
-        scrollbars="y"
-        type="scroll"
-      >
-        {children}
-      </ScrollArea.Autosize>
+      <Suspense fallback={
+        <Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
+          <Loader size='lg' />
+        </Flex>
+      }>
+        <ScrollArea.Autosize
+          style={{ flex: 1, maxHeight: '75dvh' }}
+          scrollbarSize={8}
+          scrollbars="y"
+          type="scroll"
+        >
+          {children}
+        </ScrollArea.Autosize>
+      </Suspense>
     </SheetComponent>
   );
 };