Replace Animate with AnimatePresence in Accordion component

1 files changed, 25 insertions, 10 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionContent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionContent.tsx
index beeb3ff238..99005180a0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionContent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/accordion/components/AccordionContent.tsx
@@ -1,26 +1,41 @@
+import { AnimatePresence, motion } from 'motion/react';
+import React from 'react';
 import styled from 'styled-components';
 
-import { Animate } from '../../animate';
 import { useAccordionContext } from '../AccordionContext';
 
 export type AccordionContentProps = {
   children?: React.ReactNode;
 };
 
-const StyledAccordionContent = styled.div`
+const StyledAccordionContent = styled(motion.div)`
   width: 100%;
+  overflow: hidden;
 `;
 
+const variants = {
+  collapsed: { height: 0, opacity: 0 },
+  expanded: { height: 'auto', opacity: 1 },
+};
+
 export function AccordionContent({ children }: AccordionContentProps) {
   const { contentId, triggerId, expanded } = useAccordionContext();
   return (
-    <Animate
-      present={expanded}
-      animations={[{ type: 'wipe', direction: 'vertical' }]}
-      duration="0.35s">
-      <StyledAccordionContent id={contentId} aria-labelledby={triggerId} role="region">
-        {children}
-      </StyledAccordionContent>
-    </Animate>
+    <AnimatePresence initial={false}>
+      {expanded && (
+        <StyledAccordionContent
+          id={contentId}
+          aria-labelledby={triggerId}
+          layout
+          role="region"
+          variants={variants}
+          initial="collapsed"
+          animate="expanded"
+          exit="collapsed"
+          transition={{ duration: 0.25, ease: 'easeInOut' }}>
+          {children}
+        </StyledAccordionContent>
+      )}
+    </AnimatePresence>
   );
 }