Add loader and transition for details page tabs (#5935)

Closes https://github.com/twentyhq/twenty/issues/5656 https://github.com/twentyhq/twenty/assets/22936103/3e4beea2-9aa9-4015-bb99-ee22adb53b63
2024-06-18 18:38:14 +02:00
parent cff8561597
commit 6b1548ebbe
11 changed files with 129 additions and 55 deletions
--- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';

-const StyledEmptyContainer = styled.div`
+const StyledEmptyContainer = styled(motion.div)`
  align-items: center;
  width: 100%;
  height: 100%;
@ -13,6 +14,14 @@ const StyledEmptyContainer = styled.div`

 export { StyledEmptyContainer as AnimatedPlaceholderEmptyContainer };

+export const EMPTY_PLACEHOLDER_TRANSITION_PROPS = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  transition: {
+    duration: 0.15,
+  },
+};
+
 const StyledEmptyTextContainer = styled.div`
  align-items: center;
  display: flex;