admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve onboarding experience (#12824)

Browse Source 
https://github.com/user-attachments/assets/365c1618-e9d5-46d5-9b54-bed2cdeb7c02
This commit is contained in:
Charles Bochet
2025-06-24 15:06:50 +02:00
committed by GitHub
parent 21f9db1f41
commit 2da66af26a
1 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
View File

@ -5,9 +5,11 @@ import { Controller, SubmitHandler, useForm } from 'react-hook-form';
import { Key } from 'ts-key-enum';
import { z } from 'zod';
import { Logo } from '@/auth/components/Logo';
import { SubTitle } from '@/auth/components/SubTitle';
import { Title } from '@/auth/components/Title';
import { useAuth } from '@/auth/hooks/useAuth';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
@ -16,7 +18,9 @@ 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 { isNonEmptyString } from '@sniptt/guards';
import { motion } from 'framer-motion';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { H2Title } from 'twenty-ui/display';
import { Loader } from 'twenty-ui/feedback';
@ -36,6 +40,15 @@ const StyledButtonContainer = styled.div`
width: 200px;
`;
const StyledLoaderContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
margin-top: ${({ theme }) => theme.spacing(8)};
width: 100%;
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
enum PendingCreationLoaderStep {
None = 'none',
Step1 = 'step-1',
@ -44,7 +57,6 @@ enum PendingCreationLoaderStep {
}
const StyledPendingCreationLoader = styled(motion.div)`
height: 388px;
width: 100%;
display: flex;
justify-content: center;
@ -62,6 +74,7 @@ export const CreateWorkspace = () => {
const [pendingCreationLoaderStep, setPendingCreationLoaderStep] = useState(
PendingCreationLoaderStep.None,
);
const currentWorkspace = useRecoilValue(currentWorkspaceState);
const validationSchema = z
.object({
@ -140,26 +153,36 @@ export const CreateWorkspace = () => {
<Modal.Content isVerticalCentered isHorizontalCentered>
{pendingCreationLoaderStep !== PendingCreationLoaderStep.None && (
<>
<Logo
primaryLogo={
isNonEmptyString(currentWorkspace?.logo)
? currentWorkspace?.logo
: undefined
}
/>
<Title>
<Trans>Creating your workspace</Trans>
</Title>
<StyledPendingCreationLoader>
{pendingCreationLoaderStep === PendingCreationLoaderStep.Step1 && (
<Title animate>
<Loader color="gray" />
<Trans>Setting up your database</Trans>
</Title>
<SubTitle>
<Trans>Setting up your database...</Trans>
</SubTitle>
)}
{pendingCreationLoaderStep === PendingCreationLoaderStep.Step2 && (
<Title animate>
<Loader color="gray" />
<Trans>Creating your schema</Trans>
</Title>
<SubTitle>
<Trans>Creating your data model...</Trans>
</SubTitle>
)}
{pendingCreationLoaderStep === PendingCreationLoaderStep.Step3 && (
<Title animate>
<Loader color="gray" />
<Trans>Prefilling your workspace data</Trans>
</Title>
<SubTitle>
<Trans>Prefilling your workspace data...</Trans>
</SubTitle>
)}
</StyledPendingCreationLoader>
<StyledLoaderContainer>
<Loader color="gray" />
</StyledLoaderContainer>
</>
)}
{pendingCreationLoaderStep === PendingCreationLoaderStep.None && (