dynamic import site analytics

Author: plmrry

docs/site/components/analytics/analytics-scripts.tsx

@@ -1,12 +1,41 @@
-import * as siteAnalyticsModule from "../../lib/site-analytics";
+"use client";
 
-console.log("TESTING siteAnalyticsModule", siteAnalyticsModule);
+import { useState, useEffect, type JSX } from "react";
+
+type SiteAnalytics = {
+  analytics: any;
+  consent: any;
+};
+
+function useSiteAnalytics(): SiteAnalytics | null {
+  const [result, setResult] = useState<SiteAnalytics | null>(null);
+
+  useEffect(() => {
+    let didCancel = false;
+
+    import("@vercel/site-analytics")
+      .then((mod) => {
+        console.log("Vercel Site Analytics module loaded successfully.", mod);
+      })
+      .catch(() => {
+        if (!didCancel) setResult(null);
+      });
+
+    return () => {
+      didCancel = true;
+    };
+  });
+
+  return result;
+}
 
 export function AnalyticsScripts({
   children,
 }: {
   children?: React.ReactNode;
 }): JSX.Element {
+  useSiteAnalytics();
+
   return (
     <>
       <div>ANALYTICS</div>