Merge pull request #71 from thomasKn/thomas/fv-279-fix-header-animati…

…on-on-drawer-close

Fix header animation on close Drawer

app/components/ui/Drawer.tsx

@@ -7,33 +7,30 @@ import {IconClose} from '../icons/IconClose';
 import {iconButtonClass} from './Button';
 
 const Drawer = ({
+  onOpenChange,
   open,
   preventScrollRestoration = false,
   shouldScaleBackground = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
-  const handleOpen = React.useCallback((open: boolean) => {
+  const handleOpen = React.useCallback(($open: boolean) => {
     if (!document) return;
     const body = document.body;
 
-    if (!open) {
-      const timeout = setTimeout(() => {
-        body.removeAttribute('data-drawer-open');
-        clearTimeout(timeout);
-      }, 500);
+    if (!$open) {
+      body.removeAttribute('data-drawer-open');
       return;
     }
 
-    body.setAttribute('data-drawer-open', String(open));
+    body.setAttribute('data-drawer-open', String($open));
   }, []);
 
-  React.useEffect(() => {
-    if (open !== undefined) handleOpen(open);
-  }, [open, handleOpen]);
-
   return (
     <DrawerPrimitive.Root
-      onOpenChange={handleOpen}
+      onOpenChange={($open) => {
+        onOpenChange?.($open);
+        handleOpen($open);
+      }}
       open={open}
       preventScrollRestoration={preventScrollRestoration}
       shouldScaleBackground={shouldScaleBackground}

app/hooks/useBoundedScroll.tsx

@@ -15,10 +15,8 @@ export function useBoundedScroll(threshold: number) {
       const body = document.body;
       if (body.getAttribute('data-drawer-open') === 'true') return;
 
-      if (scrollYProgress.get() >= 0.95) {
-        // Reached the bottom of the page, so we don't want to bound the scroll
-        return;
-      }
+      // Reached the bottom of the page, so we don't want to bound the scroll
+      if (scrollYProgress.get() >= 0.95) return;
 
       const previous = scrollY.getPrevious() ?? 0;
       const diff = current - previous;