Move analytics out of critical path (#2117)

* Remove analytics provider, simplify hook

* Fix wrong import being used by feed

* Remove early bind

* Create client lazy on first use

src/lib/analytics/analytics.web.tsx

@@ -1,65 +1,68 @@
 import React from 'react'
-import {
-  createClient,
-  AnalyticsProvider,
-  useAnalytics as useAnalyticsOrig,
-} from '@segment/analytics-react'
+import {createClient} from '@segment/analytics-react'
 import {sha256} from 'js-sha256'
+import {TrackEvent, AnalyticsMethods} from './types'
 
 import {useSession, SessionAccount} from '#/state/session'
 import {logger} from '#/logger'
 
-const segmentClient = createClient(
-  {
-    writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
-  },
-  {
-    integrations: {
-      'Segment.io': {
-        apiHost: 'api.events.bsky.app/v1',
-      },
-    },
-  },
-)
-export const track = segmentClient?.track?.bind?.(segmentClient)
+type SegmentClient = ReturnType<typeof createClient>
 
-export function useAnalytics() {
+// Delay creating until first actual use.
+let segmentClient: SegmentClient | null = null
+function getClient(): SegmentClient {
+  if (!segmentClient) {
+    segmentClient = createClient(
+      {
+        writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
+      },
+      {
+        integrations: {
+          'Segment.io': {
+            apiHost: 'api.events.bsky.app/v1',
+          },
+        },
+      },
+    )
+  }
+  return segmentClient
+}
+
+export const track: TrackEvent = async (...args) => {
+  await getClient().track(...args)
+}
+
+export function useAnalytics(): AnalyticsMethods {
   const {hasSession} = useSession()
-  const methods = useAnalyticsOrig()
   return React.useMemo(() => {
     if (hasSession) {
-      return methods
+      return {
+        async screen(...args) {
+          await getClient().screen(...args)
+        },
+        async track(...args) {
+          await getClient().track(...args)
+        },
+      }
     }
     // dont send analytics pings for anonymous users
     return {
-      screen: () => {},
-      track: () => {},
-      identify: () => {},
-      flush: () => {},
-      group: () => {},
-      alias: () => {},
-      reset: () => {},
+      screen: async () => {},
+      track: async () => {},
     }
-  }, [hasSession, methods])
+  }, [hasSession])
 }
 
 export function init(account: SessionAccount | undefined) {
   if (account) {
+    const client = getClient()
     if (account.did) {
-      if (account.did) {
-        const did_hashed = sha256(account.did)
-        segmentClient.identify(did_hashed, {did_hashed})
-        logger.debug('Ping w/hash')
-      } else {
-        logger.debug('Ping w/o hash')
-        segmentClient.identify()
-      }
+      const did_hashed = sha256(account.did)
+      client.identify(did_hashed, {did_hashed})
+      logger.debug('Ping w/hash')
+    } else {
+      logger.debug('Ping w/o hash')
+      client.identify()
     }
   }
 }
-
-export function Provider({children}: React.PropsWithChildren<{}>) {
-  return (
-    <AnalyticsProvider client={segmentClient}>{children}</AnalyticsProvider>
-  )
-}