Adds fallback to integration test cases

integration/templates/next-app-router/src/app/page.tsx

@@ -5,7 +5,7 @@ import { ClientId } from './client-id';
 export default function Home() {
   return (
     <main>
-      <UserButton />
+      <UserButton fallback={<>Loading user button</>} />
       <ClientId />
       <SignedIn>SignedIn</SignedIn>
       <SignedOut>SignedOut</SignedOut>

integration/templates/next-app-router/src/app/sign-up/[[...catchall]]/page.tsx

@@ -7,6 +7,7 @@ export default function Page() {
         routing={'path'}
         path={'/sign-up'}
         signInUrl={'/sign-in'}
+        fallback={<>Loading sign up</>}
       />
     </div>
   );

integration/templates/next-app-router/src/app/switcher/page.tsx

@@ -1,5 +1,10 @@
 import { OrganizationSwitcher } from '@clerk/nextjs';
 
 export default function Page() {
-  return <OrganizationSwitcher hidePersonal={true} />;
+  return (
+    <OrganizationSwitcher
+      hidePersonal={true}
+      fallback={<>Loading organization switcher</>}
+    />
+  );
 }

integration/templates/next-app-router/src/app/user/[[...catchall]]/page.tsx

@@ -3,7 +3,7 @@ import { UserProfile } from '@clerk/nextjs';
 export default function Page() {
   return (
     <div>
-      <UserProfile />
+      <UserProfile fallback={<>Loading user profile</>} />
     </div>
   );
 }

integration/templates/react-vite/src/custom-user-button/index.tsx

@@ -22,7 +22,7 @@ function Page1() {
 export default function Page() {
   return (
     <PageContextProvider>
-      <UserButton>
+      <UserButton fallback={<>Loading user button</>}>
         <UserButton.UserProfilePage
           label={'Page 1'}
           labelIcon={<p data-label-icon={'page-1'}>🙃</p>}

integration/templates/react-vite/src/custom-user-profile/index.tsx

@@ -22,7 +22,10 @@ function Page1() {
 export default function Page() {
   return (
     <PageContextProvider>
-      <UserProfile path={'/custom-user-profile'}>
+      <UserProfile
+        fallback={<>Loading user profile</>}
+        path={'/custom-user-profile'}
+      >
         <UserProfile.Page
           label={'Page 1'}
           labelIcon={<p data-label-icon={'page-1'}>🙃</p>}

integration/templates/react-vite/src/sign-up/index.tsx

@@ -6,6 +6,7 @@ export default function Page() {
       <SignUp
         path={'/sign-up'}
         signInUrl={'/sign-in'}
+        fallback={<>Loading sign up</>}
       />
     </div>
   );

integration/templates/react-vite/src/user/index.tsx

@@ -3,7 +3,10 @@ import { UserProfile } from '@clerk/clerk-react';
 export default function Page() {
   return (
     <div>
-      <UserProfile path={'/user'} />
+      <UserProfile
+        path={'/user'}
+        fallback={<>Loading user profile</>}
+      />
     </div>
   );
 }

integration/tests/sign-up-flow.test.ts

@@ -10,6 +10,12 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign up f
     await app.teardown();
   });
 
+  test('sign up supports fallback', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.page.goToRelative('/sign-up');
+    await expect(u.page.getByText('Loading sign up')).toBeVisible();
+  });
+
   test('sign up with email and password', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     const fakeUser = u.services.users.createFakeUser({

packages/react/src/components/uiComponents.tsx

@@ -12,7 +12,7 @@ import type {
   WaitlistProps,
   Without,
 } from '@clerk/types';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import React, { createContext, createElement, useContext } from 'react';
 
 import {
@@ -49,7 +49,7 @@ type FallbackProp = {
   /**
    * An optional element to render while the component is mounting.
    */
-  fallback?: ReactElement;
+  fallback?: ReactNode;
 };
 
 type UserProfileExportType = typeof _UserProfile & {