src/components/Blocks/Form/Button/index.tsx

@@ -2,6 +2,7 @@ import type { ElementType } from "react";
 
 import Link from "next/link";
 import React from "react";
+import { CgSpinner } from "react-icons/cg";
 
 export type Props = {
   appearance?: "default" | "primary" | "secondary";
@@ -12,6 +13,7 @@ export type Props = {
   label?: string;
   newTab?: boolean | null;
   onClick?: () => void;
+  isLoading?: boolean;
 };
 
 export const Button: React.FC<Props> = ({
@@ -21,6 +23,7 @@ export const Button: React.FC<Props> = ({
   href,
   label,
   newTab,
+  isLoading,
 }) => {
   const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
   const Element: ElementType = el;
@@ -35,19 +38,21 @@ export const Button: React.FC<Props> = ({
 
   const content = (
     <div className="btn btn-mod btn-color btn-large btn-full btn-circle btn-hover-anim">
-      <span>{label}</span>
+      <span className="flex flex-row">
+        {label} {isLoading && <CgSpinner color="var(--ext-color-primary-1)" className="animate-spin ml-2" size={24} />}
+      </span>
     </div>
   );
 
   return (
-    <Element {...elementProps}>
+    <Element {...elementProps} {...{ disabled: isLoading }}>
       <React.Fragment>
         {(el === "link" || el === "a") && (
           <Link {...newTabProps} href={href || ""}>
             {content}
           </Link>
         )}
-        {el === "button" && content}
+        {el === "button" && <>{content}</>}
       </React.Fragment>
     </Element>
   );

src/components/Blocks/Form/index.tsx

@@ -76,7 +76,7 @@ export const FormBlock: React.FC<
         // delay loading indicator by 1s
         loadingTimerID = setTimeout(() => {
           setIsLoading(true);
-        }, 1000);
+        }, 250);
 
         try {
           const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, {
@@ -160,7 +160,7 @@ export const FormBlock: React.FC<
                   return null;
                 })}
             </div>
-            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} />
+            <Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
           </form>
         )}
       </div>