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-chrome-extension/src/options/Loading.tsx

@@ -1,6 +1,5 @@
-import styled from '@emotion/styled';
-
 import { Loader } from '@/ui/display/loader/components/Loader';
+import styled from '@emotion/styled';
 
 const StyledContainer = styled.div`
   align-items: center;

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, ThemeColor, themeColorSchema } from 'twenty-ui';
-
-import { Loader } from '@/ui/feedback/loader/components/Loader';
 
 const StyledStatus = styled.h3<{
   color: ThemeColor;

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';

packages/twenty-ui/src/feedback/index.ts

@@ -1,3 +1,4 @@
+export * from './loader/components/Loader';
 export * from './progress-bar/components/CircularProgressBar';
 export * from './progress-bar/components/ProgressBar';
 export * from './progress-bar/hooks/useProgressAnimation';

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { ThemeColor } from '@ui/theme';
 import { motion } from 'framer-motion';
-import { ThemeColor } from 'twenty-ui';
 
 const StyledLoaderContainer = styled.div<{
   color?: ThemeColor;

packages/twenty-ui/src/index.ts

@@ -1,6 +1,7 @@
 export * from './accessibility';
 export * from './components';
 export * from './display';
+export * from './feedback';
 export * from './input';
 export * from './feedback';
 export * from './layout';