Fix SignupCTA loading delay by implementing SSR with client hydration

src/components/NavbarItems/SignupCTA/index.js

@@ -1,19 +1,57 @@
-import React from "react";
-import BrowserOnly from "@docusaurus/BrowserOnly";
-import { useDynamicConfig } from "../../lib/statsig";
+import React, { useState, useEffect } from "react";
+
+const SignupCTA = () => {
+  const [cta, setCta] = useState("Get Started");
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (isClient && typeof window !== "undefined" && window.Statsig) {
+      const loadDynamicConfig = async () => {
+        try {
+          const statsig = window.Statsig.StatsigClient.instance(
+            "client-ytx8IW8M9gdyg6VZOQ8v8azsZx4PzcD6MhxyxmUVNga"
+          );
+
+          if (statsig.loadingState === "Ready") {
+            const ctaConfig = statsig.getDynamicConfig("docs_cta");
+            const dynamicCta = ctaConfig?.get("cta");
+            if (dynamicCta) {
+              setCta(dynamicCta);
+            }
+          } else {
+            const handleValuesUpdated = () => {
+              const ctaConfig = statsig.getDynamicConfig("docs_cta");
+              const dynamicCta = ctaConfig?.get("cta");
+              if (dynamicCta) {
+                setCta(dynamicCta);
+              }
+            };
+
+            statsig.on("values_updated", handleValuesUpdated);
+            return () => {
+              statsig.off("values_updated", handleValuesUpdated);
+            };
+          }
+        } catch (error) {
+          console.error("Failed to load dynamic config:", error);
+        }
+      };
+
+      loadDynamicConfig();
+    }
+  }, [isClient]);
+
+  const url = "https://console.statsig.com";
+
+  return (
+    <a className="navbar__item" href={url} target="_blank">
+      <button className="signupCTA CTA">{cta}</button>
+    </a>
+  );
+};
 
-const SignupCTA = () => (
-  <BrowserOnly>
-    {() => {
-      const ctaConfig = useDynamicConfig("docs_cta");
-      const url = "https://console.statsig.com";
-      const cta = ctaConfig?.get("cta") ?? "Get Started";
-      return (
-        <a className="navbar__item" href={url} target="_blank">
-          <button className="signupCTA CTA">{cta}</button>
-        </a>
-      );
-    }}
-  </BrowserOnly>
-);
 export default React.memo(SignupCTA);