skeleton for h2h

src/components/sheet/drawer.tsx

@@ -1,5 +1,10 @@
-import { Box, Container, Flex, Loader, Title, useComputedColorScheme } from "@mantine/core";
-import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
+import {
+  Box,
+  Container,
+  Title,
+  useComputedColorScheme,
+} from "@mantine/core";
+import { PropsWithChildren, useEffect, useRef } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import styles from "./styles.module.css";
 
@@ -17,6 +22,11 @@ const Drawer: React.FC<DrawerProps> = ({
 }) => {
   const colorScheme = useComputedColorScheme("light");
   const contentRef = useRef<HTMLDivElement>(null);
+  const openedRef = useRef(opened);
+
+  useEffect(() => {
+    openedRef.current = opened;
+  }, [opened]);
 
   useEffect(() => {
     const appElement = document.querySelector(".app") as HTMLElement;
@@ -57,7 +67,7 @@ const Drawer: React.FC<DrawerProps> = ({
       appElement.classList.remove("drawer-scaling");
       themeColorMeta.content = currentColors.normal;
     };
-  }, [opened, colorScheme]);
+  }, [opened]);
 
   useEffect(() => {
     if (!opened || !contentRef.current) return;
@@ -69,46 +79,44 @@ const Drawer: React.FC<DrawerProps> = ({
 
         if (visualViewport) {
           const availableHeight = visualViewport.height;
-          const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
+          const maxDrawerHeight = Math.min(
+            availableHeight * 0.75,
+            window.innerHeight * 0.75
+          );
 
           drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
         } else {
-          drawerContent.style.maxHeight = '75vh';
+          drawerContent.style.maxHeight = "75vh";
         }
       }
     };
 
-    const resizeObserver = new ResizeObserver(() => {
-      if (contentRef.current) {
-        const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
-        if (drawerContent) {
-          (drawerContent as HTMLElement).style.height = 'auto';
-          (drawerContent as HTMLElement).offsetHeight;
-        }
-      }
-    });
-
     updateDrawerHeight();
 
     if (window.visualViewport) {
-      window.visualViewport.addEventListener('resize', updateDrawerHeight);
+      window.visualViewport.addEventListener("resize", updateDrawerHeight);
     }
 
-    resizeObserver.observe(contentRef.current);
-
     return () => {
-      resizeObserver.disconnect();
       if (window.visualViewport) {
-        window.visualViewport.removeEventListener('resize', updateDrawerHeight);
+        window.visualViewport.removeEventListener("resize", updateDrawerHeight);
       }
     };
-  }, [opened, children]);
+  }, [opened]);
 
   return (
-    <VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
+    <VaulDrawer.Root
+      repositionInputs={false}
+      open={opened}
+      onOpenChange={onChange}
+    >
       <VaulDrawer.Portal>
         <VaulDrawer.Overlay className={styles.drawerOverlay} />
-        <VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
+        <VaulDrawer.Content
+          className={styles.drawerContent}
+          aria-describedby="drawer"
+          ref={contentRef}
+        >
           <Container flex={1} p="md">
             <Box
               mb="sm"
@@ -120,14 +128,10 @@ const Drawer: React.FC<DrawerProps> = ({
               style={{ borderRadius: "9999px" }}
             />
             <Container mx="auto" maw="28rem" px={0}>
-              <VaulDrawer.Title><Title order={2}>{title}</Title></VaulDrawer.Title>
-              <Suspense fallback={
-                <Flex justify='center' align='center' w='100%' h={400}>
-                  <Loader size='lg' />
-                </Flex>
-              }>
-                {children}
-              </Suspense>
+              <VaulDrawer.Title>
+                <Title order={2}>{title}</Title>
+              </VaulDrawer.Title>
+              {children}
             </Container>
           </Container>
         </VaulDrawer.Content>

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>
   );
 };