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/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>
 );