From de1e592cd384577ca890867d65aad231f3dea444 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 20 Apr 2026 11:39:09 +0200
Subject: [PATCH] fix(front): suppress full-page skeleton inside auth modal
 (#19875)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

- Lazy auth-flow routes (`SignInUp`, `Invite`, `ResetPassword`,
`CreateWorkspace`, `CreateProfile`, `SyncEmails`, `InviteTeam`,
`PlanRequired`, `PlanRequiredSuccess`, `BookCallDecision`, `BookCall`)
render through `<Outlet/>` inside `<AuthModal>`. Their `LazyRoute`
`<Suspense>` fallback was the page-level `PageContentSkeletonLoader`, so
the two grey shimmer bars painted **inside the modal box** for a few
hundred ms while each chunk downloaded.
- `LazyRoute` now accepts an optional `fallback` prop (default
unchanged: the existing page skeleton). Every auth-modal route passes
`fallback={null}` so the modal stays empty until the lazy chunk resolves
instead of flashing the shimmer.
- `AuthModal`'s inner `StyledContent` gets a `min-height: 320px` so the
framer-motion `layout` animation doesn't rapidly resize the modal as
inner steps (loader → form → password → 2FA / workspace selection) swap.
The modal can still grow for taller steps; only the rapid jump is
removed.

## Why default-parameter syntax for `fallback`

`fallback ?? <LazyRouteFallback/>` would treat an explicit `null` as "no
value" and still render the default skeleton. Using a default parameter
(`fallback = <LazyRouteFallback/>`) preserves an explicit `null` because
defaults only kick in for `undefined`.
---
 .../src/modules/app/components/LazyRoute.tsx  |  8 ++++---
 .../modules/app/hooks/useCreateAppRouter.tsx  | 22 +++++++++----------
 .../src/modules/auth/components/AuthModal.tsx |  3 +++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/app/components/LazyRoute.tsx b/packages/twenty-front/src/modules/app/components/LazyRoute.tsx
index 15a942a6110..0b49a0b7de7 100644
--- a/packages/twenty-front/src/modules/app/components/LazyRoute.tsx
+++ b/packages/twenty-front/src/modules/app/components/LazyRoute.tsx
@@ -4,6 +4,7 @@ import { PageContentSkeletonLoader } from '~/loading/components/PageContentSkele
 
 type LazyRouteProps = {
   children: ReactNode;
+  fallback?: ReactNode;
 };
 
 const LazyRouteFallback = () => (
@@ -12,6 +13,7 @@ const LazyRouteFallback = () => (
   </PageContainer>
 );
 
-export const LazyRoute = ({ children }: LazyRouteProps) => (
-  <Suspense fallback={<LazyRouteFallback />}>{children}</Suspense>
-);
+export const LazyRoute = ({
+  children,
+  fallback = <LazyRouteFallback />,
+}: LazyRouteProps) => <Suspense fallback={fallback}>{children}</Suspense>;
diff --git a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx b/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
index 7cfa4cd001b..7fb09204b0c 100644
--- a/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
+++ b/packages/twenty-front/src/modules/app/hooks/useCreateAppRouter.tsx
@@ -124,7 +124,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.SignInUp}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <SignInUp />
               </LazyRoute>
             }
@@ -132,7 +132,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.Invite}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <SignInUp />
               </LazyRoute>
             }
@@ -140,7 +140,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.ResetPassword}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <PasswordReset />
               </LazyRoute>
             }
@@ -148,7 +148,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.CreateWorkspace}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <CreateWorkspace />
               </LazyRoute>
             }
@@ -156,7 +156,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.CreateProfile}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <CreateProfile />
               </LazyRoute>
             }
@@ -164,7 +164,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.SyncEmails}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <SyncEmails />
               </LazyRoute>
             }
@@ -172,7 +172,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.InviteTeam}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <InviteTeam />
               </LazyRoute>
             }
@@ -180,7 +180,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.PlanRequired}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <ChooseYourPlan />
               </LazyRoute>
             }
@@ -188,7 +188,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.PlanRequiredSuccess}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <PaymentSuccess />
               </LazyRoute>
             }
@@ -196,7 +196,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.BookCallDecision}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <BookCallDecision />
               </LazyRoute>
             }
@@ -204,7 +204,7 @@ export const useCreateAppRouter = (
           <Route
             path={AppPath.BookCall}
             element={
-              <LazyRoute>
+              <LazyRoute fallback={null}>
                 <BookCall />
               </LazyRoute>
             }
diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
index 72afad4e5a5..7107efdc97b 100644
--- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
+++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
@@ -9,7 +9,10 @@ import { useLocation } from 'react-router-dom';
 
 const StyledContent = styled.div`
   align-items: center;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
+  min-height: 320px;
 `;
 
 type AuthModalProps = {