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

Resolves #5134 



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

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx

@@ -17,6 +17,7 @@ export const SettingsAccountsSynchronizationStatus = ({
   return (
     <Status
       color={syncStatusOption?.color ?? 'gray'}
+      isLoaderVisible={syncStatus === 'ONGOING' || syncStatus === 'PENDING'}
       text={syncStatusOption?.label ?? 'Not synced'}
       weight="medium"
     />

packages/twenty-front/src/modules/ui/display/status/components/Status.tsx

@@ -1,11 +1,13 @@
 import styled from '@emotion/styled';
 
+import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;
   weight: 'regular' | 'medium';
+  isLoaderVisible: boolean;
 }>`
   align-items: center;
   background: ${({ color, theme }) => theme.tag.background[color]};
@@ -19,7 +21,10 @@ const StyledStatus = styled.h3<{
   height: ${({ theme }) => theme.spacing(5)};
   margin: 0;
   overflow: hidden;
-  padding: 0 ${({ theme }) => theme.spacing(2)};
+  padding: 0
+    ${({ theme, isLoaderVisible }) =>
+      isLoaderVisible ? theme.spacing(1) : theme.spacing(2)}
+    0 ${({ theme }) => theme.spacing(2)};
 
   &:before {
     background-color: ${({ color, theme }) => theme.tag.text[color]};
@@ -41,6 +46,7 @@ const StyledContent = styled.span`
 type StatusProps = {
   className?: string;
   color: ThemeColor;
+  isLoaderVisible?: boolean;
   text: string;
   onClick?: () => void;
   weight?: 'regular' | 'medium';
@@ -49,6 +55,7 @@ type StatusProps = {
 export const Status = ({
   className,
   color,
+  isLoaderVisible = false,
   text,
   onClick,
   weight = 'regular',
@@ -58,7 +65,9 @@ export const Status = ({
     color={themeColorSchema.catch('gray').parse(color)}
     onClick={onClick}
     weight={weight}
+    isLoaderVisible={isLoaderVisible}
   >
     <StyledContent>{text}</StyledContent>
+    {isLoaderVisible ? <Loader color={color} /> : null}
   </StyledStatus>
 );

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

@@ -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)`
+const StyledLoader = styled(motion.div)<{
-  background-color: ${({ theme }) => theme.font.color.tertiary};
+  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 = () => (
+type LoaderProps = {
-  <StyledLoaderContainer>
+  color?: ThemeColor;
+};
+
+export const Loader = ({ color }: LoaderProps) => (
+  <StyledLoaderContainer color={color}>
     <StyledLoader
+      color={color}
       animate={{
         x: [-16, 0, 16],
         width: [8, 12, 8],