diff --git a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx index 9d12ea755..d7a91554a 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx +++ b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { zodResolver } from '@hookform/resolvers/zod'; -import { useCallback } from 'react'; +import { useCallback, useState } from 'react'; import { Controller, SubmitHandler, useForm } from 'react-hook-form'; import { Key } from 'ts-key-enum'; import { z } from 'zod'; @@ -16,6 +16,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { Modal } from '@/ui/layout/modal/components/Modal'; import { Trans, useLingui } from '@lingui/react/macro'; +import { motion } from 'framer-motion'; import { isDefined } from 'twenty-shared/utils'; import { H2Title } from 'twenty-ui/display'; import { Loader } from 'twenty-ui/feedback'; @@ -35,6 +36,21 @@ const StyledButtonContainer = styled.div` width: 200px; `; +enum PendingCreationLoaderStep { + None = 'none', + Step1 = 'step-1', + Step2 = 'step-2', + Step3 = 'step-3', +} + +const StyledPendingCreationLoader = styled(motion.div)` + height: 388px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +`; + export const CreateWorkspace = () => { const { t } = useLingui(); const { enqueueSnackBar } = useSnackBar(); @@ -43,6 +59,9 @@ export const CreateWorkspace = () => { const { loadCurrentUser } = useAuth(); const [activateWorkspace] = useActivateWorkspaceMutation(); + const [pendingCreationLoaderStep, setPendingCreationLoaderStep] = useState( + PendingCreationLoaderStep.None, + ); const validationSchema = z .object({ @@ -68,6 +87,16 @@ export const CreateWorkspace = () => { const onSubmit: SubmitHandler