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 /> - captcha + {isLoading ? ( + loading... + ) : ( + imageSources[currentChallengeIndex] && captcha + )}
diff --git a/src/components/styled/modals/CaptchaModal.styled.jsx b/src/components/styled/modals/CaptchaModal.styled.jsx index 6f5e0cc0..04f21ca6 100644 --- a/src/components/styled/modals/CaptchaModal.styled.jsx +++ b/src/components/styled/modals/CaptchaModal.styled.jsx @@ -58,6 +58,7 @@ export const StyledModal = styled(Modal)` position: relative; clear: both; width: 302px; + height: 100px; overflow: hidden; margin-bottom: 3px; }