Fixing Singup sequence FLASHING💥 (#11371)

After investiagting the different options ([see related
issue](https://github.com/twentyhq/core-team-issues/issues/660#issuecomment-2766030972))
I decided to add a "Verify Component" and a to build a custom Layout for
this route.

Reason I cannot use the default one is to have all preloaded once the
user changes website and lands on the verify route.

Reason I did not modify the DefaultLayout to match our need is that is
would require many changes in order to avoid preloading states for our
specific usecase.

Fixes https://github.com/twentyhq/core-team-issues/issues/660

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/auth/components/AuthModal.tsx

@@ -8,10 +8,20 @@ const StyledContent = styled(Modal.Content)`
   justify-content: center;
 `;
 
-type AuthModalProps = { children: React.ReactNode };
+type AuthModalProps = {
+  children: React.ReactNode;
+  isOpenAnimated?: boolean;
+};
 
-export const AuthModal = ({ children }: AuthModalProps) => (
-  <Modal padding={'none'} modalVariant="primary">
+export const AuthModal = ({
+  children,
+  isOpenAnimated = true,
+}: AuthModalProps) => (
+  <Modal
+    padding={'none'}
+    modalVariant="primary"
+    isOpenAnimated={isOpenAnimated}
+  >
     <ScrollWrapper componentInstanceId="scroll-wrapper-modal-content">
       <StyledContent>{children}</StyledContent>
     </ScrollWrapper>

packages/twenty-front/src/modules/auth/components/Verify.tsx

@@ -6,10 +6,11 @@ import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { isDefined } from 'twenty-shared/utils';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { SignInUpLoading } from '~/pages/auth/SignInUpLoading';
 
-export const VerifyEffect = () => {
+export const Verify = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
   const errorMessage = searchParams.get('errorMessage');
@@ -36,5 +37,5 @@ export const VerifyEffect = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return <></>;
+  return <SignInUpLoading />;
 };

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -3,14 +3,14 @@ import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
+import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
+import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
-import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
-import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
+import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
 
 export const VerifyEmailEffect = () => {
   const { getLoginTokenFromEmailVerificationToken } = useAuth();
@@ -50,6 +50,7 @@ export const VerifyEmailEffect = () => {
         if (workspaceUrl.slice(0, -1) !== window.location.origin) {
           return redirectToWorkspaceDomain(workspaceUrl, AppPath.Verify, {
             loginToken: loginToken.token,
+            animateModal: false,
           });
         }
         verifyLoginToken(loginToken.token);

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -416,6 +416,7 @@ export const useAuth = () => {
           {
             ...(!isEmailVerificationRequired && {
               loginToken: signUpResult.data.signUp.loginToken.token,
+              animateModal: false,
             }),
             email,
           },