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

feat: Status tags can show loader to complement displayed text (#5137)

Browse Source 
Resolves #5134 



https://github.com/twentyhq/twenty/assets/16918891/48475f1b-a61f-4b87-8b9b-1271a183ac4b

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Orinami Olatunji
2024-04-25 09:27:17 +01:00
committed by GitHub
parent a283a3deed
commit 0ccbdacb5a
3 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,11 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
const StyledLoaderContainer = styled.div`
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
const StyledLoaderContainer = styled.div<{
color?: ThemeColor;
}>`
justify-content: center;
align-items: center;
display: flex;
@ -9,20 +13,30 @@ const StyledLoaderContainer = styled.div`
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};
border: 1px solid
${({ color, theme }) =>
color ? theme.tag.text[color] : theme.font.color.tertiary};
overflow: hidden;
`;
const StyledLoader = styled(motion.div)`
background-color: ${({ theme }) => theme.font.color.tertiary};
const StyledLoader = styled(motion.div)<{
color?: ThemeColor;
}>`
background-color: ${({ color, theme }) =>
color ? theme.tag.text[color] : theme.font.color.tertiary};
border-radius: ${({ theme }) => theme.border.radius.pill};
height: 8px;
width: 8px;
`;
export const Loader = () => (
<StyledLoaderContainer>
type LoaderProps = {
color?: ThemeColor;
};
export const Loader = ({ color }: LoaderProps) => (
<StyledLoaderContainer color={color}>
<StyledLoader
color={color}
animate={{
x: [-16, 0, 16],
width: [8, 12, 8],