feat: Add loading text to waitlist success step

clerk · Oct 23, 2024 · 61b3d19 · 61b3d19
1 parent 40923a6
commit 61b3d19
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 3 deletions.
diff --git 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) => {
           <Header.Title localizationKey={localizationKeys('waitlist.success.title')} />
           <Header.Subtitle localizationKey={localizationKeys('waitlist.success.subtitle')} />
         </Header.Root>
+        {ctx.redirectUrl && (
+          <Flex
+            direction='col'
+            elementDescriptor={descriptors.main}
+            gap={6}
+          >
+            <Col center>
+              <Flex
+                gap={2}
+                align='center'
+              >
+                <Icon
+                  icon={SpinnerJumbo}
+                  sx={t => ({
+                    margin: 'auto',
+                    width: t.sizes.$6,
+                    height: t.sizes.$6,
+                    animation: `${animations.spinning} 1s linear infinite`,
+                  })}
+                />
+                <Text
+                  colorScheme='secondary'
+                  localizationKey={localizationKeys('waitlist.success.message')}
+                />
+              </Flex>
+            </Col>
+          </Flex>
+        )}
       </Col>
     </Wizard>
   );

diff --git 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
diff --git 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
@@ -804,6 +804,7 @@ type _LocalizationResource = {
     success: {
       title: LocalizationValue;
       subtitle: LocalizationValue;
+      message: LocalizationValue;
     };
   };
 };