From c6c50180b74bd4755eca2ed15c63b70091f6490b Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Fri, 2 Feb 2024 14:37:46 +0100
Subject: [PATCH] Add animation during email message opening (#3774)

* Add animation while message opening

* Set isDisplayed as always true

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
---
 .../emails/components/EmailThreadMessage.tsx        |  2 +-
 .../emails/components/EmailThreadMessageBody.tsx    | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
index 92a964807..96bf185f3 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
@@ -60,7 +60,7 @@ export const EmailThreadMessage = ({
       </StyledThreadMessageHeader>
       <StyledThreadMessageBody>
         {isOpen ? (
-          <EmailThreadMessageBody body={body} />
+          <EmailThreadMessageBody body={body} isDisplayed />
         ) : (
           <EmailThreadMessageBodyPreview body={body} />
         )}
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
index 34b218122..128197c60 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 
-const StyledThreadMessageBody = styled.div`
+import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
+
+const StyledThreadMessageBody = styled(motion.div)`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   flex-direction: column;
@@ -12,10 +15,16 @@ const StyledThreadMessageBody = styled.div`
 
 type EmailThreadMessageBodyProps = {
   body: string;
+  isDisplayed: boolean;
 };
 
 export const EmailThreadMessageBody = ({
   body,
+  isDisplayed,
 }: EmailThreadMessageBodyProps) => {
-  return <StyledThreadMessageBody>{body}</StyledThreadMessageBody>;
+  return (
+    <AnimatedEaseInOut isOpen={isDisplayed} duration="fast">
+      <StyledThreadMessageBody>{body}</StyledThreadMessageBody>
+    </AnimatedEaseInOut>
+  );
 };