fix: toast color change on close fixed (new state for loading)

src/features/authentication/components/OtpVerifyForm.tsx

@@ -23,9 +23,9 @@ export function OtpVerifyForm({
 }: OtpVerifyFormProps) {
   const [otpCode, setOtpCode] = useState<string>('');
   const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
-  const [verifyStatus, setVerifyStatus] = useState<
-    'loading' | 'success' | 'failed'
-  >();
+  const [verifyStatus, setVerifyStatus] = useState<'success' | 'failed'>();
+  const [verifyStatusLoading, setVerifyStatusLoading] =
+    useState<boolean>(false);
   const [verifyAlertOpen, setVerifyAlertOpen] = useState<boolean>(false);
   const { t } = useTranslation('authentication');
 
@@ -40,13 +40,14 @@ export function OtpVerifyForm({
       setOtpDigitInvalid(true);
     } else {
       setOtpDigitInvalid(false);
-      setVerifyStatus('loading');
-      // Change setTimeout to api call
+      setVerifyStatusLoading(true);
 
+      // Change setTimeout to api call
       setTimeout(() => {
         setVerifyAlertOpen(true);
         setVerifyStatus('success');
         onOTPVerified(otpCode);
+        setVerifyStatusLoading(false);
       }, 1000);
     }
   };
@@ -128,7 +129,7 @@ export function OtpVerifyForm({
         onChange={(value) => handleDigitInputChange(value as string[])}
       />
 
-      <Button onClick={handleVerifyOTP} loading={verifyStatus === 'loading'}>
+      <Button onClick={handleVerifyOTP} loading={verifyStatusLoading}>
         {authMode === 'register'
           ? t('verify.confirmAndContinue')
           : t('verify.confirmAndLogin')}