fix(front): suppress full-page skeleton inside auth modal (#19875)
## 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`.
This commit is contained in:
@@ -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>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user