Migrate to twenty-ui - feedback/loader (#7997)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7528](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7528).

 --- 

### Description

- Move loader components to `twenty-ui`    
  
Fixes  twentyhq/private-issues#90

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx

@@ -1,9 +1,9 @@
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 import {
   AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
+  Loader,
 } from 'twenty-ui';
 
 export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -9,7 +9,6 @@ import { SignInUpStep } from '@/auth/states/signInUpStepState';
 import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { captchaProviderState } from '@/client-config/states/captchaProviderState';
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -23,6 +22,7 @@ import {
   IconGoogle,
   IconKey,
   IconMicrosoft,
+  Loader,
   MainButton,
 } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';

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

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { ThemeColor, themeColorSchema } from 'twenty-ui';
-
-import { Loader } from '@/ui/feedback/loader/components/Loader';
+import { Loader, ThemeColor, themeColorSchema } from 'twenty-ui';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;

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

@@ -1,51 +0,0 @@
-import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
-import { ThemeColor } from 'twenty-ui';
-
-const StyledLoaderContainer = styled.div<{
-  color?: ThemeColor;
-}>`
-  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
-    ${({ color, theme }) =>
-      color ? theme.tag.text[color] : theme.font.color.tertiary};
-  overflow: hidden;
-`;
-
-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;
-`;
-
-type LoaderProps = {
-  color?: ThemeColor;
-};
-
-export const Loader = ({ color }: LoaderProps) => (
-  <StyledLoaderContainer color={color}>
-    <StyledLoader
-      color={color}
-      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>
-);

packages/twenty-front/src/pages/auth/Invite.tsx

@@ -5,13 +5,12 @@ import { SignInUpForm } from '@/auth/sign-in-up/components/SignInUpForm';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { useWorkspaceSwitching } from '@/ui/navigation/navigation-drawer/hooks/useWorkspaceSwitching';
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { AnimatedEaseIn, MainButton } from 'twenty-ui';
+import { AnimatedEaseIn, Loader, MainButton } from 'twenty-ui';
 import {
   useAddUserToWorkspaceByInviteTokenMutation,
   useAddUserToWorkspaceMutation,

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -5,7 +5,6 @@ import { SubscriptionBenefit } from '@/billing/components/SubscriptionBenefit';
 import { SubscriptionCard } from '@/billing/components/SubscriptionCard';
 import { billingState } from '@/client-config/states/billingState';
 import { AppPath } from '@/types/AppPath';
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { CardPicker } from '@/ui/input/components/CardPicker';
@@ -13,7 +12,7 @@ import styled from '@emotion/styled';
 import { isNonEmptyString, isNumber } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, CAL_LINK, MainButton } from 'twenty-ui';
+import { ActionLink, CAL_LINK, Loader, MainButton } from 'twenty-ui';
 import {
   ProductPriceEntity,
   SubscriptionInterval,

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { H2Title, MainButton } from 'twenty-ui';
+import { H2Title, Loader, MainButton } from 'twenty-ui';
 import { z } from 'zod';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -14,7 +14,6 @@ import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queri
 import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';