refactor: stream the analytics provider (#2637)

chanceaclark · web-flow · commit 4845d878781e · 2025-10-15T18:19:58.000Z
diff --git a/core/app/[locale]/layout.tsx b/core/app/[locale]/layout.tsx
@@ -10,14 +10,15 @@ import { cache, PropsWithChildren } from 'react';
 
 import '../../globals.css';
 
+import { Streamable } from '@/vibes/soul/lib/streamable';
 import { fonts } from '~/app/fonts';
 import { CookieNotifications } from '~/app/notifications';
 import { Providers } from '~/app/providers';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { WebAnalyticsFragment } from '~/components/analytics/fragment';
-import { AnalyticsProvider } from '~/components/analytics/provider';
+import { StreamableAnalyticsProvider } from '~/components/analytics/streamable-provider';
 import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
 import { ScriptManagerScripts, ScriptsFragment } from '~/components/scripts';
 import { routing } from '~/i18n/routing';
@@ -100,7 +101,7 @@ interface Props extends PropsWithChildren {
 export default async function RootLayout({ params, children }: Props) {
   const { locale } = await params;
 
-  const { data } = await fetchRootLayoutMetadata();
+  const rootData = await fetchRootLayoutMetadata();
   const toastNotificationCookieData = await getToastNotification();
 
   if (!routing.locales.includes(locale)) {
@@ -111,30 +112,41 @@ export default async function RootLayout({ params, children }: Props) {
   // https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-setRequestLocale-to-all-layouts-and-pages
   setRequestLocale(locale);
 
+  const streamableAnalyticsData = Streamable.from(async () => {
+    const { data } = await fetchRootLayoutMetadata();
+
+    return {
+      channelId: data.channel.entityId,
+      settings: data.site.settings,
+    };
+  });
+
   return (
     <html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
       <head>
         <ScriptManagerScripts
-          scripts={data.site.content.headerScripts}
+          scripts={rootData.data.site.content.headerScripts}
           strategy="afterInteractive"
         />
       </head>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider>
           <NuqsAdapter>
-            <AnalyticsProvider channelId={data.channel.entityId} settings={data.site.settings}>
-              <Providers>
-                {toastNotificationCookieData && (
-                  <CookieNotifications {...toastNotificationCookieData} />
-                )}
-                {children}
-              </Providers>
-            </AnalyticsProvider>
+            <StreamableAnalyticsProvider data={streamableAnalyticsData} />
+            <Providers>
+              {toastNotificationCookieData && (
+                <CookieNotifications {...toastNotificationCookieData} />
+              )}
+              {children}
+            </Providers>
           </NuqsAdapter>
         </NextIntlClientProvider>
         <VercelComponents />
         <ContainerQueryPolyfill />
-        <ScriptManagerScripts scripts={data.site.content.footerScripts} strategy="lazyOnload" />
+        <ScriptManagerScripts
+          scripts={rootData.data.site.content.footerScripts}
+          strategy="lazyOnload"
+        />
       </body>
     </html>
   );
diff --git a/core/components/analytics/streamable-provider.tsx b/core/components/analytics/streamable-provider.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { PropsWithChildren } from 'react';
+import { Suspense } from 'react';
 
+import { Streamable, useStreamable } from '@/vibes/soul/lib/streamable';
 import { FragmentOf } from '~/client/graphql';
 import { Analytics } from '~/lib/analytics';
 import { GoogleAnalyticsProvider } from '~/lib/analytics/providers/google-analytics';
@@ -36,8 +37,17 @@ const getAnalytics = (
   return null;
 };
 
-export function AnalyticsProvider({ children, settings, channelId }: PropsWithChildren<Props>) {
+export function StreamableAnalyticsProvider({ data }: { data: Streamable<Props> }) {
+  return (
+    <Suspense fallback={null}>
+      <StreamableAnalyticsProviderResolved data={data} />
+    </Suspense>
+  );
+}
+
+function StreamableAnalyticsProviderResolved({ data }: { data: Streamable<Props> }) {
+  const { channelId, settings } = useStreamable(data);
   const analytics = getAnalytics(channelId, settings);
 
-  return <AnalyticsProviderLib analytics={analytics ?? null}>{children}</AnalyticsProviderLib>;
+  return <AnalyticsProviderLib analytics={analytics ?? null} />;
 }
diff --git a/core/lib/analytics/react/index.tsx b/core/lib/analytics/react/index.tsx
@@ -1,17 +1,19 @@
 'use client';
 
-import { createContext, useContext, useEffect } from 'react';
+import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
 
 import { type Analytics } from '../types';
 
 const AnalyticsContext = createContext<Analytics | null>(null);
 
 interface AnalyticsProviderProps {
   analytics: Analytics | null;
-  children: React.ReactNode;
 }
 
-export const AnalyticsProvider = ({ children, analytics }: AnalyticsProviderProps) => {
+export const AnalyticsProvider = ({
+  children,
+  analytics,
+}: PropsWithChildren<AnalyticsProviderProps>) => {
   useEffect(() => {
     analytics?.initialize();
   }, [analytics]);
