From 2d1aed42522b8647510dbb8260a2135c02121be9 Mon Sep 17 00:00:00 2001
From: Zack Rauen <rauenzi@outlook.com>
Date: Thu, 20 Jul 2023 15:13:31 -0400
Subject: [PATCH] Improve disclosure collapse animation

---
 src/components/bookmarks/group.jsx | 25 ++++++++++++++++---------
 src/components/services/group.jsx  | 26 +++++++++++++++++---------
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx
index ef0a5ab8f..44db59fcc 100644
--- a/src/components/bookmarks/group.jsx
+++ b/src/components/bookmarks/group.jsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import classNames from "classnames";
 import { Disclosure, Transition } from '@headlessui/react';
 import { MdKeyboardArrowDown } from "react-icons/md";
@@ -6,6 +7,7 @@ import ErrorBoundary from "components/errorboundry";
 import List from "components/bookmarks/list";
 
 export default function BookmarksGroup({ group, disableCollapse }) {
+  const panel = useRef();
   return (
     <div key={group.name} className="flex-1">
     <Disclosure defaultOpen>
@@ -15,19 +17,24 @@ export default function BookmarksGroup({ group, disableCollapse }) {
           <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
           <MdKeyboardArrowDown className={classNames(
             disableCollapse ? 'hidden' : '',
-            'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
-            open ? 'rotate-180 transform' : ''
+            'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+            open ? '' : 'rotate-90'
             )} />
         </Disclosure.Button>
         <Transition
-          enter="transition duration-200 ease-out"
-          enterFrom="transform scale-75 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-75 opacity-0"
+          // Otherwise the transition group does display: none and cancels animation
+          className="!block"
+          unmount={false}
+          beforeLeave={() => {
+            panel.current.style.height = `${panel.current.scrollHeight}px`;
+            setTimeout(() => {panel.current.style.height = `0`}, 1);
+          }}
+          beforeEnter={() => {
+            panel.current.style.height = `0px`;
+            setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
+          }}
           >
-            <Disclosure.Panel>
+            <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
               <ErrorBoundary>
                 <List bookmarks={group.bookmarks} />
               </ErrorBoundary>
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index eb64cc3d0..b3805c4f6 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import classNames from "classnames";
 import { Disclosure, Transition } from '@headlessui/react';
 import { MdKeyboardArrowDown } from "react-icons/md";
@@ -7,6 +8,8 @@ import ResolvedIcon from "components/resolvedicon";
 
 export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse }) {
 
+  const panel = useRef();
+
   return (
     <div
       key={services.name}
@@ -28,19 +31,24 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
           <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
           <MdKeyboardArrowDown className={classNames(
             disableCollapse ? 'hidden' : '',
-            'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
-            open ? 'rotate-180 transform' : ''
+            'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
+            open ? '' : 'rotate-90'
             )} />
         </Disclosure.Button>
         <Transition
-          enter="transition duration-200 ease-out"
-          enterFrom="transform scale-75 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-75 opacity-0"
+          // Otherwise the transition group does display: none and cancels animation
+          className="!block"
+          unmount={false}
+          beforeLeave={() => {
+            panel.current.style.height = `${panel.current.scrollHeight}px`;
+            setTimeout(() => {panel.current.style.height = `0`}, 1);
+          }}
+          beforeEnter={() => {
+            panel.current.style.height = `0px`;
+            setTimeout(() => {panel.current.style.height = `${panel.current.scrollHeight}px`}, 1);
+          }}
           >
-            <Disclosure.Panel>
+            <Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
               <List group={group} services={services.services} layout={layout} />
             </Disclosure.Panel>
         </Transition>