fix(clerk-js): Fix layout shift when navigating after task resolution (#6265)

Author: LauraBeatris

.changeset/ripe-months-stay.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix layout shift when navigating after task resolution

packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -1,6 +1,6 @@
 import { useClerk } from '@clerk/shared/react';
 import { eventComponentMounted } from '@clerk/shared/telemetry';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
@@ -57,6 +57,7 @@ export const SessionTask = withCardStateProvider(() => {
   const signInContext = useContext(SignInContext);
   const signUpContext = useContext(SignUpContext);
   const [isNavigatingToTask, setIsNavigatingToTask] = useState(false);
+  const currentTaskContainer = useRef<HTMLDivElement>(null);
 
   const redirectUrlComplete =
     signInContext?.afterSignInUrl ?? signUpContext?.afterSignUpUrl ?? clerk?.buildAfterSignInUrl();
@@ -88,8 +89,12 @@ export const SessionTask = withCardStateProvider(() => {
 
   if (!clerk.session?.currentTask) {
     return (
-      <Card.Root>
-        <Card.Content>
+      <Card.Root
+        sx={() => ({
+          minHeight: currentTaskContainer ? currentTaskContainer.current?.offsetHeight : undefined,
+        })}
+      >
+        <Card.Content sx={() => ({ flex: 1 })}>
           <LoadingCardContainer />
         </Card.Content>
         <Card.Footer />
@@ -98,7 +103,7 @@ export const SessionTask = withCardStateProvider(() => {
   }
 
   return (
-    <SessionTasksContext.Provider value={{ nextTask, redirectUrlComplete }}>
+    <SessionTasksContext.Provider value={{ nextTask, redirectUrlComplete, currentTaskContainer }}>
       <SessionTaskRoutes />
     </SessionTasksContext.Provider>
   );

packages/clerk-js/src/ui/components/SessionTasks/tasks/ForceOrganizationSelection.tsx

@@ -3,6 +3,7 @@ import type { PropsWithChildren } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import { OrganizationListContext } from '@/ui/contexts';
+import { useSessionTasksContext } from '@/ui/contexts/components/SessionTasks';
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 
@@ -103,9 +104,10 @@ const CreateOrganizationPage = ({ currentFlow }: CommonPageProps) => {
 
 const FlowCard = ({ children }: PropsWithChildren) => {
   const card = useCardState();
+  const { currentTaskContainer } = useSessionTasksContext();
 
   return (
-    <Card.Root>
+    <Card.Root ref={currentTaskContainer}>
       <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}` })}>
         <Card.Alert sx={t => ({ margin: `${t.space.$none} ${t.space.$5}` })}>{card.error}</Card.Alert>
         {children}

packages/clerk-js/src/ui/types.ts

@@ -132,6 +132,7 @@ export type CheckoutCtx = __internal_CheckoutProps & {
 export type SessionTasksCtx = {
   nextTask: () => Promise<void>;
   redirectUrlComplete?: string;
+  currentTaskContainer: React.RefObject<HTMLDivElement> | null;
 };
 
 export type OAuthConsentCtx = __internal_OAuthConsentProps & {