save

Author: zzq0826

src/components/Footer/Subscribe/Subscribe.tsx

@@ -19,12 +19,57 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
-  const [mounted, setMounted] = useState(false)
+  const [isReady, setIsReady] = useState(false)
 
   useEffect(() => {
-    setTimeout(() => {
-      setMounted(true)
-    }, 300)
+    const ensureResourcesLoaded = async () => {
+      try {
+        // Wait for i18next to be initialized
+        if (!i18next.isInitialized) {
+          await new Promise((resolve) => {
+            const handler = () => {
+              i18next.off("initialized", handler)
+              resolve(undefined)
+            }
+            i18next.on("initialized", handler)
+          })
+        }
+
+        // changeLanguage will wait for resources to load if they're not already loaded
+        if (props.lang && i18next.language !== props.lang) {
+          await changeLanguage(props.lang)
+        }
+
+        // Double-check that resources are actually loaded
+        const targetLang = props.lang || i18next.language || "en"
+        if (i18next.hasResourceBundle(targetLang, "translation")) {
+          setIsReady(true)
+        } else {
+          // Wait for resources to be loaded
+          await new Promise((resolve) => {
+            const checkResources = () => {
+              if (i18next.hasResourceBundle(targetLang, "translation")) {
+                i18next.off("loaded", checkResources)
+                resolve(undefined)
+              }
+            }
+            i18next.on("loaded", checkResources)
+            // Check immediately in case resources are already loaded
+            if (i18next.hasResourceBundle(targetLang, "translation")) {
+              i18next.off("loaded", checkResources)
+              resolve(undefined)
+            }
+          })
+          setIsReady(true)
+        }
+      } catch (error) {
+        // If something goes wrong, still set ready to avoid blocking the UI
+        console.error("Error loading i18next resources:", error)
+        setIsReady(true)
+      }
+    }
+
+    ensureResourcesLoaded()
   }, [props.lang])
 
   useEffect(() => {
@@ -47,11 +92,9 @@ export default function Subscribe(props) {
     setEmail(e.target.value)
   }
 
-  if(!mounted) {
+  if (!isReady) {
     return null
   }
-  
-  i18next.changeLanguage(props.lang)
 
   return (
     <div className={clsx(styles.container, "dark:bg-dark-highlight")}>
@@ -61,22 +104,28 @@ export default function Subscribe(props) {
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
-          <div className={styles.subscribeText}>
-          { t("landing.NewsletterCTA.text") }
-          </div>
+          <div className={styles.subscribeTitle}>{t("landing.NewsletterCTA.title")}</div>
+          <div className={styles.subscribeText}>{t("landing.NewsletterCTA.text")}</div>
         </div>
         <MailchimpSubscribe
           url={url}
-          render={({ subscribe, status, message }: any) => (
+          render={({
+            subscribe,
+            status,
+            message,
+          }: {
+            subscribe: (data: { EMAIL: string }) => void
+            status: string
+            message: string
+          }) => (
             <div className={styles.emailBox}>
               <EmailInput
                 className={styles.emailInput}
                 value={email}
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder= { t("landing.NewsletterCTA.placeholder") }
+                placeholder={t("landing.NewsletterCTA.placeholder")}
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}