diff --git a/packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx b/packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx
index a3145656a2..f320f32fc7 100644
--- a/packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx
+++ b/packages/clerk-js/src/ui/components/Waitlist/WaitlistForm.tsx
@@ -3,10 +3,12 @@ import type { JoinWaitlistParams } from '@clerk/types';
import { useWizard, Wizard } from '../../common';
import { useWaitlistContext } from '../../contexts';
-import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
+import { Col, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';
import { Card, Form, Header, useCardState } from '../../elements';
import { useLoadingStatus } from '../../hooks';
+import { SpinnerJumbo } from '../../icons';
import { useRouter } from '../../router';
+import { animations } from '../../styledSystem';
import { type FormControlState, handleError } from '../../utils';
import type { Fields } from './Waitlist';
@@ -41,11 +43,14 @@ export const WaitlistForm = (props: WaitlistFormProps) => {
await clerk
.joinWaitlist(joinWaitlistParams)
.then(() => {
+ wizard.nextStep();
+
if (ctx.redirectUrl) {
- void navigate(ctx.redirectUrl);
+ setTimeout(() => {
+ void navigate(ctx.redirectUrl);
+ }, 2000);
return;
}
- wizard.nextStep();
})
.catch(error => {
handleError(error, [], card.setError);
@@ -94,6 +99,34 @@ export const WaitlistForm = (props: WaitlistFormProps) => {
+ {ctx.redirectUrl && (
+
+
+
+ ({
+ margin: 'auto',
+ width: t.sizes.$6,
+ height: t.sizes.$6,
+ animation: `${animations.spinning} 1s linear infinite`,
+ })}
+ />
+
+
+
+
+ )}
);
diff --git a/packages/clerk-js/src/ui/icons/index.ts b/packages/clerk-js/src/ui/icons/index.ts
index 7a43c73f84..861f4795e6 100644
--- a/packages/clerk-js/src/ui/icons/index.ts
+++ b/packages/clerk-js/src/ui/icons/index.ts
@@ -62,3 +62,4 @@ export { default as Organization } from './organization.svg';
export { default as Users } from './users.svg';
export { default as Fingerprint } from './fingerprint.svg';
export { default as Block } from './block.svg';
+export { default as SpinnerJumbo } from './spinner-jumbo.svg';
diff --git a/packages/clerk-js/src/ui/icons/spinner-jumbo.svg b/packages/clerk-js/src/ui/icons/spinner-jumbo.svg
new file mode 100644
index 0000000000..bd1d69c9c0
--- /dev/null
+++ b/packages/clerk-js/src/ui/icons/spinner-jumbo.svg
@@ -0,0 +1,11 @@
+
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 3e16a67e78..96331c9971 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -901,6 +901,7 @@ export const enUS: LocalizationResource = {
success: {
title: 'Thanks for joining the waitlist!',
subtitle: 'We’ll be in touch when your spot is ready',
+ message: 'You will be redirected soon...',
},
},
} as const;
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index cfa6ab4f1b..1b110244f7 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -804,6 +804,7 @@ type _LocalizationResource = {
success: {
title: LocalizationValue;
subtitle: LocalizationValue;
+ message: LocalizationValue;
};
};
};