Animate between IconX and IconReload (#13949)

Closes #13866 

An animation of 150ms has been introduced to all icons that are rendered
inside `OverridableCheckbox`. Attaching a recording of the same.
[Loom
Recording](https://www.loom.com/share/65293c13171a4bf8934c577eecbca9a0)

packages/twenty-ui/src/utilities/animation/components/AnimatedRotate.tsx

@@ -0,0 +1,46 @@
+import { useTheme } from '@emotion/react';
+import { type AnimationDuration } from '@ui/theme';
+import { type HTMLMotionProps, motion } from 'framer-motion';
+
+type AnimatedRotateProps = Omit<
+  HTMLMotionProps<'div'>,
+  'initial' | 'animate' | 'transition' | 'exit'
+> & {
+  duration?: AnimationDuration;
+  animateOnHover?: boolean;
+};
+
+export const AnimatedRotate = ({
+  children,
+  duration = 'fast',
+  animateOnHover,
+}: AnimatedRotateProps): JSX.Element => {
+  const theme = useTheme();
+  const initial = { opacity: 0, rotate: -90 };
+  const animate = { opacity: 1, rotate: 0 };
+  const exit = { opacity: 0, rotate: 90 };
+  const transition = {
+    duration: theme.animation.duration[duration],
+  };
+
+  return (
+    <motion.div
+      initial={initial}
+      animate={animate}
+      transition={transition}
+      exit={exit}
+      whileHover={
+        animateOnHover
+          ? {
+              rotate: 45,
+              transition: {
+                duration: theme.animation.duration.fast,
+              },
+            }
+          : {}
+      }
+    >
+      {children}
+    </motion.div>
+  );
+};

packages/twenty-ui/src/utilities/index.ts

@@ -12,6 +12,7 @@ export { AnimatedContainer } from './animation/components/AnimatedContainer';
 export { AnimatedEaseIn } from './animation/components/AnimatedEaseIn';
 export { AnimatedEaseInOut } from './animation/components/AnimatedEaseInOut';
 export { AnimatedFadeOut } from './animation/components/AnimatedFadeOut';
+export { AnimatedRotate } from './animation/components/AnimatedRotate';
 export { AnimatedTextWord } from './animation/components/AnimatedTextWord';
 export { AnimatedTranslation } from './animation/components/AnimatedTranslation';
 export { stringToHslColor } from './color/utils/stringToHslColor';