adds loader in otp component

Author: arch1995

packages/modal/src/ui/components/Login/LoginOtp/LoginOtp.tsx

@@ -58,7 +58,14 @@ function OtpInput(props: OtpInputProps) {
             </p>
           </div>
         </div>
-        <Otp length={6} onComplete={handleOtpComplete} error={Boolean(errorMessage)} helperText={errorMessage} disabled={otpLoading} />
+        <Otp
+          length={6}
+          onComplete={handleOtpComplete}
+          error={Boolean(errorMessage)}
+          helperText={errorMessage}
+          loading={otpLoading}
+          disabled={otpLoading}
+        />
       </div>
     </>
   );

packages/modal/src/ui/components/Otp/Otp.tsx

@@ -3,13 +3,15 @@ import { useTranslation } from "react-i18next";
 
 import i18n from "../../localeImport";
 import { cn } from "../../utils";
+import PulseLoader from "../PulseLoader";
 import { OtpProps } from "./Otp.type";
 
 const OtpInput = forwardRef<HTMLDivElement, OtpProps>(
   (
     {
       length,
-      resendTimer,
+      loading,
+      resendTimer = 60,
       onComplete,
       onChange,
       error = false,
@@ -179,9 +181,14 @@ const OtpInput = forwardRef<HTMLDivElement, OtpProps>(
           ))}
         </form>
         {helperText && <p className={helperTextClass}>{helperText}</p>}
-        {showCta && (
+        {loading && (
+          <div className="w3a--mt-3">
+            <PulseLoader />
+          </div>
+        )}
+        {showCta && !loading && (
           <div className={cn("w3a--flex w3a--items-center w3a--mt-3", classes?.ctaContainer)}>
-            {timer > 0 && showTimer && !disabled ? (
+            {timer > 0 && showTimer ? (
               <span className={cn("w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400", classes?.timerText)}>
                 {t("modal.resendTimer", { timer: timer })}
               </span>
@@ -190,7 +197,7 @@ const OtpInput = forwardRef<HTMLDivElement, OtpProps>(
                 type="button"
                 className={cn("w3a--text-xs w3a--p-0 w3a--text-app-primary-600 dark:w3a--text-app-primary-500", classes?.resendBtnText)}
                 onClick={handleResendClick}
-                disabled={(timer > 0 && showTimer) || disabled}
+                disabled={timer > 0 && showTimer}
               >
                 {resendBtnText || t("modal.resendCode")}
               </button>

packages/modal/src/ui/components/Otp/Otp.type.ts

@@ -14,6 +14,7 @@ export type OtpClassesType =
 
 export interface OtpProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "placeholder"> {
   length: number;
+  loading?: boolean;
   resendTimer?: number;
   error?: boolean;
   success?: boolean;