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/ui/layout/modal/components/Modal.tsx

@@ -7,6 +7,7 @@ import {
   useListenClickOutside,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import React, { useEffect, useRef } from 'react';
@@ -148,6 +149,7 @@ export type ModalProps = React.PropsWithChildren & {
   className?: string;
   hotkeyScope?: ModalHotkeyScope;
   onEnter?: () => void;
+  isOpenAnimated?: boolean;
   modalVariant?: ModalVariants;
 } & (
     | { isClosable: true; onClose: () => void }
@@ -170,6 +172,7 @@ export const Modal = ({
   isClosable = false,
   onClose,
   modalVariant = 'primary',
+  isOpenAnimated = true,
 }: ModalProps) => {
   const isMobile = useIsMobile();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -223,6 +226,8 @@ export const Modal = ({
     e.stopPropagation();
   };
 
+  const theme = useTheme();
+
   return (
     <StyledBackDrop
       className="modal-backdrop"
@@ -233,12 +238,13 @@ export const Modal = ({
         ref={modalRef}
         size={size}
         padding={padding}
-        initial="hidden"
+        initial={isOpenAnimated ? 'hidden' : 'visible'}
         animate="visible"
         exit="exit"
         layout
         modalVariant={modalVariant}
         variants={modalAnimation}
+        transition={{ duration: theme.animation.duration.normal }}
         className={className}
         isMobile={isMobile}
       >