fix: Added signing pad disable state while submitting form (#892)

Fixes : #891

apps/marketing/src/components/(marketing)/widget.tsx

@@ -399,6 +399,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
           </DialogDescription>
 
           <SignaturePad
+            disabled={isSubmitting}
             className="aspect-video w-full rounded-md border"
             defaultValue={signatureDataUrl || ''}
             onChange={setDraftSignatureDataUrl}

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -132,6 +132,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                   <CardContent className="p-0">
                     <SignaturePad
                       className="h-44 w-full"
+                      disabled={isSubmitting}
                       defaultValue={signature ?? undefined}
                       onChange={(value) => {
                         setSignature(value);

apps/web/src/components/forms/profile.tsx

@@ -121,10 +121,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                 <FormControl>
                   <SignaturePad
                     className="h-44 w-full"
-                    containerClassName={cn(
+                    disabled={isSubmitting}
-                      'rounded-lg border bg-background',
+                    containerClassName={cn('rounded-lg border bg-background')}
-                      isSubmitting ? 'pointer-events-none opacity-50' : null,
-                    )}
                     defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
                   />

apps/web/src/components/forms/signup.tsx

@@ -172,6 +172,7 @@ export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) =
                 <FormControl>
                   <SignaturePad
                     className="h-36 w-full"
+                    disabled={isSubmitting}
                     containerClassName="mt-2 rounded-lg border bg-background"
                     onChange={(v) => onChange(v ?? '')}
                   />

packages/ui/primitives/signature-pad/signature-pad.tsx

@@ -16,6 +16,7 @@ const DPI = 2;
 export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
   onChange?: (_signatureDataUrl: string | null) => void;
   containerClassName?: string;
+  disabled?: boolean;
 };
 
 export const SignaturePad = ({
@@ -23,6 +24,7 @@ export const SignaturePad = ({
   containerClassName,
   defaultValue,
   onChange,
+  disabled = false,
   ...props
 }: SignaturePadProps) => {
   const $el = useRef<HTMLCanvasElement>(null);
@@ -214,7 +216,11 @@ export const SignaturePad = ({
   }, [defaultValue]);
 
   return (
-    <div className={cn('relative block', containerClassName)}>
+    <div
+      className={cn('relative block', containerClassName, {
+        'pointer-events-none opacity-50': disabled,
+      })}
+    >
       <canvas
         ref={$el}
         className={cn('relative block dark:invert', className)}