From fbe042db3bcb030747741c7e73b0d0c60627b024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Thu, 28 Nov 2024 15:05:59 +0100
Subject: [PATCH] Calendar event cursor flashes (#8792)

Fixes #4692

This is not the most beautiful fix (I think the right fix is to add 1px
somewhere), but this issue is old and deserved to be closed quickly
without spending too much time as this will likely be refactored and is
not very important
---
 .../components/CalendarCurrentEventCursor.tsx | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
index 9d0211cf1..9c67353b0 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarCurrentEventCursor.tsx
@@ -20,6 +20,13 @@ type CalendarCurrentEventCursorProps = {
   calendarEvent: TimelineCalendarEvent;
 };
 
+const StyledDot = styled(motion.div)`
+  background-color: ${({ theme }) => theme.font.color.danger};
+  border-radius: 1px;
+  height: ${({ theme }) => theme.spacing(1)};
+  width: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledCurrentEventCursor = styled(motion.div)`
   align-items: center;
   background-color: ${({ theme }) => theme.font.color.danger};
@@ -30,15 +37,6 @@ const StyledCurrentEventCursor = styled(motion.div)`
   right: 0;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   transform: translateY(-50%);
-
-  &::before {
-    background-color: ${({ theme }) => theme.font.color.danger};
-    border-radius: 1px;
-    content: '';
-    display: block;
-    height: ${({ theme }) => theme.spacing(1)};
-    width: ${({ theme }) => theme.spacing(1)};
-  }
 `;
 
 export const CalendarCurrentEventCursor = ({
@@ -166,7 +164,18 @@ export const CalendarCurrentEventCursor = ({
           transition={{
             duration: theme.animation.duration.normal,
           }}
-        />
+        >
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{
+              delay: theme.animation.duration.normal,
+              duration: theme.animation.duration.normal,
+            }}
+          >
+            <StyledDot />
+          </motion.div>
+        </StyledCurrentEventCursor>
       )}
     </AnimatePresence>
   );