diff --git a/src/components/modals/CaptchaModal.jsx b/src/components/modals/CaptchaModal.jsx
index e52cf3de..a492fbed 100644
--- a/src/components/modals/CaptchaModal.jsx
+++ b/src/components/modals/CaptchaModal.jsx
@@ -20,6 +20,7 @@ const CaptchaModal = () => {
} = useGeneralStore(state => state);
const [imageSources, setImageSources] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
const [totalChallenges, setTotalChallenges] = useState(0);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
@@ -49,7 +50,8 @@ const CaptchaModal = () => {
useEffect(() => {
- if (challengesArray) {
+ if (isCaptchaOpen && challengesArray) {
+ setIsLoading(true);
const challenges = challengesArray.challenges;
const decryptedChallenges = [];
@@ -61,8 +63,9 @@ const CaptchaModal = () => {
setImageSources(decryptedChallenges);
setTotalChallenges(decryptedChallenges.length);
+ setIsLoading(false);
}
- }, [challengesArray]);
+ }, [challengesArray, isCaptchaOpen]);
const handleKeyDown = (event) => {
@@ -157,7 +160,11 @@ const CaptchaModal = () => {
ref={responseRef}
onKeyDown={handleKeyDown}
autoFocus />
-
+ {isLoading ? (
+
+ ) : (
+ imageSources[currentChallengeIndex] &&
+ )}