wip lazy load feature flag

src/frontend/src/features/analytics/hooks/useFeatureFlagEnabled.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import { getPosthog } from '../utils'
+import { useIsAnalyticsEnabled } from './useIsAnalyticsEnabled'
+
+/**
+ * Same contract as `useFeatureFlagEnabled` from 'posthog-js/react', without a
+ * static import of posthog-js: that import puts the whole SDK on the critical
+ * path of every screen, defeating the lazy `getPosthog()`.
+ */
+export const useFeatureFlagEnabled = (flag: string): boolean | undefined => {
+  const isAnalyticsEnabled = useIsAnalyticsEnabled()
+  const [enabled, setEnabled] = useState<boolean | undefined>(undefined)
+
+  useEffect(() => {
+    if (!isAnalyticsEnabled) return
+    let cancelled = false
+    let unsubscribe: (() => void) | undefined
+    void getPosthog().then((ph) => {
+      if (cancelled) return
+      setEnabled(ph.isFeatureEnabled(flag))
+      unsubscribe = ph.onFeatureFlags(() =>
+        setEnabled(ph.isFeatureEnabled(flag))
+      )
+    })
+    return () => {
+      cancelled = true
+      unsubscribe?.()
+    }
+  }, [flag, isAnalyticsEnabled])
+
+  return enabled
+}

src/frontend/src/features/recording/hooks/useHasFeatureWithoutRecordingRights.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import type { RecordingMode } from '../types'
 import { useIsRecordingModeEnabled } from './useIsRecordingModeEnabled'

src/frontend/src/features/recording/hooks/useHasRecordingAccess.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import type { RecordingMode } from '../types'
 import { useIsRecordingModeEnabled } from './useIsRecordingModeEnabled'

src/frontend/src/features/recording/hooks/useMetadataCollectorEnabled.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import { FeatureFlags } from '@/features/analytics/enums'
 

src/frontend/src/features/rooms/livekit/hooks/useHasFunnyEffectsAccess.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import { FeatureFlags } from '@/features/analytics/enums'
 import useKonami from '@/features/rooms/livekit/hooks/useKonami'

src/frontend/src/features/rooms/livekit/hooks/useNoiseReductionAvailable.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import { isMobileBrowser } from '@livekit/components-core'

src/frontend/src/features/subtitle/hooks/useAreSubtitlesAvailable.ts

@@ -1,4 +1,4 @@
-import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { useFeatureFlagEnabled } from '@/features/analytics/hooks/useFeatureFlagEnabled'
 import { FeatureFlags } from '@/features/analytics/enums'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import { useConfig } from '@/api/useConfig'