From 869dc1b616739d0057e0a164b4624730b52b3d91 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Mon, 29 Jan 2024 11:57:03 -0500
Subject: [PATCH] ReCaptcha with loading state

---
 src/components/ReCaptcha/index.tsx   | 34 ++++++++++++++++++++++++++++
 src/components/ReCaptcha/styles.scss |  7 ++++++
 src/pages/SignIn.tsx                 | 11 ++++-----
 3 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ReCaptcha/index.tsx
 create mode 100644 src/components/ReCaptcha/styles.scss

diff --git a/src/components/ReCaptcha/index.tsx b/src/components/ReCaptcha/index.tsx
new file mode 100644
index 0000000..f683306
--- /dev/null
+++ b/src/components/ReCaptcha/index.tsx
@@ -0,0 +1,34 @@
+import { ForwardedRef, forwardRef, useState } from "react";
+import Recaptcha from "react-google-recaptcha";
+import { Loader } from "@stellar/design-system";
+import { RECAPTCHA_SITE_KEY } from "constants/envVariables";
+
+import "./styles.scss";
+
+export const ReCaptcha = forwardRef(
+  (
+    {
+      onSubmit,
+    }: {
+      onSubmit: (token: string | null) => void;
+    },
+    ref: ForwardedRef<Recaptcha>,
+  ) => {
+    const [isRecaptchaLoading, setIsRecaptchaLoading] = useState(true);
+
+    return (
+      <div className="RecaptchaContainer">
+        {isRecaptchaLoading ? <Loader /> : null}
+        <Recaptcha
+          ref={ref}
+          size="normal"
+          sitekey={RECAPTCHA_SITE_KEY}
+          onChange={onSubmit}
+          asyncScriptOnLoad={() => {
+            setIsRecaptchaLoading(false);
+          }}
+        />
+      </div>
+    );
+  },
+);
diff --git a/src/components/ReCaptcha/styles.scss b/src/components/ReCaptcha/styles.scss
new file mode 100644
index 0000000..cd63cad
--- /dev/null
+++ b/src/components/ReCaptcha/styles.scss
@@ -0,0 +1,7 @@
+.RecaptchaContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index 972f083..1362d94 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -13,16 +13,18 @@ import { v4 as uuidv4 } from "uuid";
 
 import { AppDispatch, resetStoreAction } from "store";
 import { signInAction } from "store/ducks/userAccount";
-import { USE_SSO, RECAPTCHA_SITE_KEY } from "constants/envVariables";
+import { USE_SSO } from "constants/envVariables";
 import { Routes, LOCAL_STORAGE_DEVICE_ID } from "constants/settings";
 import { useRedux } from "hooks/useRedux";
 import { signInRedirect } from "helpers/singleSingOn";
 import { ErrorWithExtras } from "components/ErrorWithExtras";
+import { ReCaptcha } from "components/ReCaptcha";
 
 export const SignIn = () => {
   const dispatch: AppDispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
+
   const recaptchaRef = useRef<Recaptcha>(null);
 
   const { userAccount } = useRedux("userAccount");
@@ -145,12 +147,7 @@ export const SignIn = () => {
                 isPassword
                 onChange={(e) => setPassword(e.target.value)}
               />
-              <Recaptcha
-                ref={recaptchaRef}
-                size="normal"
-                sitekey={RECAPTCHA_SITE_KEY}
-                onChange={onRecaptchaSubmit}
-              />
+              <ReCaptcha ref={recaptchaRef} onSubmit={onRecaptchaSubmit} />
             </>
           )}
           {USE_SSO ? (