extract InlineLoadingSpinner

Author: kylemh

components/Form/MultiStepForm.tsx

@@ -14,18 +14,8 @@ import Button from 'components/Buttons/Button/Button';
 import Form from 'components/Form/Form';
 import Alert from 'components/Alert/Alert';
 import ProgressIndicator from 'components/ProgressIndicator/ProgressIndicator';
-import { twMerge } from 'tailwind-merge';
 import type { OptionType } from 'components/Form/Select/ThemedReactSelect';
-
-const InlineLoadingSpinner = ({ className }: { className?: string }) => (
-  <span
-    aria-hidden
-    className={twMerge(
-      'border-solid border-white border-4 !border-b-themePrimary rounded-[50%] h-5 w-5 box-border animate-spin group-hover:border-themeSecondary transition-colors',
-      className,
-    )}
-  />
-);
+import { InlineLoadingSpinner } from 'components/InlineLoadingSpinner';
 
 interface MultiStepFormProps<T> {
   initialValues: T;

components/Forms/RegistrationForm/RegistrationForm.tsx

@@ -13,6 +13,7 @@ import Link from 'next/link';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 import type { AxiosError } from 'axios';
 import axios from 'axios';
+import { InlineLoadingSpinner } from 'components/InlineLoadingSpinner';
 
 export interface RegistrationFormValues {
   email: string;
@@ -222,7 +223,10 @@ export function RegistrationForm({
 
           <div className="max-w-md px-3 mt-5">
             <Button type="submit" theme="secondary" disabled={isSubmitting}>
-              Submit
+              <span className="flex items-center justify-center gap-x-2">
+                {isSubmitting && <InlineLoadingSpinner />}
+                <span className="mt-[0.325rem]">Submit ✓</span>
+              </span>
             </Button>
             <p className="pt-5 text-xs">
               The demographic information you provide, helps us understand our community needs,

components/InlineLoadingSpinner.tsx

@@ -0,0 +1,15 @@
+import { twMerge } from 'tailwind-merge';
+
+interface InlineLoadingSpinnerProps {
+  className?: string;
+}
+
+export const InlineLoadingSpinner = ({ className }: InlineLoadingSpinnerProps) => (
+  <span
+    aria-hidden
+    className={twMerge(
+      'border-solid border-white border-4 !border-b-themePrimary rounded-[50%] h-5 w-5 box-border animate-spin group-hover:border-themeSecondary transition-colors',
+      className,
+    )}
+  />
+);