admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

3706 add email loader (#3731)

Browse Source 
* add images

* update component

* wip

* add loader cntainer

* wip

* Loader is working

* fix color and keyframes

* change loading message for threads
This commit is contained in:
bosiraphael
2024-02-01 10:15:41 +01:00
committed by GitHub
parent fc01c8cd4f
commit bd5d930be2
7 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/twenty-front/src/modules/ui/feedback/loader/components/Loader.tsx Normal file
View File

@ -0,0 +1,38 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
const StyledLoaderContainer = styled.div`
justify-content: center;
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
width: ${({ theme }) => theme.spacing(6)};
height: ${({ theme }) => theme.spacing(3)};
border-radius: ${({ theme }) => theme.border.radius.pill};
border: 1px solid ${({ theme }) => theme.font.color.tertiary};
overflow: hidden;
`;
const StyledLoader = styled(motion.div)`
background-color: ${({ theme }) => theme.font.color.tertiary};
border-radius: ${({ theme }) => theme.border.radius.pill};
height: 8px;
width: 8px;
`;
export const Loader = () => (
<StyledLoaderContainer>
<StyledLoader
animate={{
x: [-16, 0, 16],
width: [8, 12, 8],
height: [8, 2, 8],
}}
transition={{
duration: 0.8,
times: [0, 0.15, 0.3],
repeat: Infinity,
}}
/>
</StyledLoaderContainer>
);

2
packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts
View File

@ -5,6 +5,7 @@ export const Background: Record<string, string> = {
noTask: '/images/placeholders/background/no_task_bg.png',
errorIndex: '/images/placeholders/background/error_index_bg.png',
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
error404: '/images/placeholders/background/404_bg.png',
error500: '/images/placeholders/background/500_bg.png',
@ -17,6 +18,7 @@ export const MovingImage: Record<string, string> = {
noTask: '/images/placeholders/moving-image/no_task.png',
errorIndex: '/images/placeholders/moving-image/error_index.png',
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
error404: '/images/placeholders/moving-image/404.png',
error500: '/images/placeholders/moving-image/500.png',