Hook up suggestedUser:seen client events (#9468)

* Hook up suggestedUser:seen client events

* Fix crash when clicking "find people to follow"

* While we're at it, fix the position of the X button on the "find people to follow" modal

* Add suggestedDid and category attributes to suggestedUser client events

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/components/FeedInterstitials.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useCallback, useEffect, useRef} from 'react'
 import {ScrollView, View} from 'react-native'
 import {type AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -8,6 +8,7 @@ import {useNavigation} from '@react-navigation/native'
 import {type NavigationProp} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {type MetricEvents} from '#/logger/metrics'
 import {isIOS} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
@@ -241,12 +242,14 @@ export function ProfileGrid({
   profiles,
   recId,
   viewContext = 'feed',
+  isVisible = true,
 }: {
   isSuggestionsLoading: boolean
   profiles: bsky.profile.AnyProfileView[]
   recId?: number
   error: Error | null
   viewContext: 'profile' | 'profileHeader' | 'feed'
+  isVisible?: boolean
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -261,6 +264,84 @@ export function ProfileGrid({
   const maxLength = gtMobile ? 3 : isProfileHeaderContext ? 12 : 6
   const minLength = gtMobile ? 3 : 4
 
+  // Track seen profiles
+  const seenProfilesRef = useRef<Set<string>>(new Set())
+  const containerRef = useRef<View>(null)
+  const hasTrackedRef = useRef(false)
+  const logContext: MetricEvents['suggestedUser:seen']['logContext'] =
+    isFeedContext
+      ? 'InterstitialDiscover'
+      : isProfileHeaderContext
+        ? 'Profile'
+        : 'InterstitialProfile'
+
+  // Callback to fire seen events
+  const fireSeen = useCallback(() => {
+    if (isLoading || error || !profiles.length) return
+    if (hasTrackedRef.current) return
+    hasTrackedRef.current = true
+
+    const profilesToShow = profiles.slice(0, maxLength)
+    profilesToShow.forEach((profile, index) => {
+      if (!seenProfilesRef.current.has(profile.did)) {
+        seenProfilesRef.current.add(profile.did)
+        logger.metric(
+          'suggestedUser:seen',
+          {
+            logContext,
+            recId,
+            position: index,
+            suggestedDid: profile.did,
+            category: null,
+          },
+          {statsig: true},
+        )
+      }
+    })
+  }, [isLoading, error, profiles, maxLength, logContext, recId])
+
+  // For profile header, fire when isVisible becomes true
+  useEffect(() => {
+    if (isProfileHeaderContext) {
+      if (!isVisible) {
+        hasTrackedRef.current = false
+        return
+      }
+      fireSeen()
+    }
+  }, [isVisible, isProfileHeaderContext, fireSeen])
+
+  // For feed interstitials, use IntersectionObserver to detect actual visibility
+  useEffect(() => {
+    if (isProfileHeaderContext) return // handled above
+    if (isLoading || error || !profiles.length) return
+
+    const node = containerRef.current
+    if (!node) return
+
+    // Use IntersectionObserver on web to detect when actually visible
+    if (typeof IntersectionObserver !== 'undefined') {
+      const observer = new IntersectionObserver(
+        entries => {
+          if (entries[0]?.isIntersecting) {
+            fireSeen()
+            observer.disconnect()
+          }
+        },
+        {threshold: 0.5},
+      )
+      // @ts-ignore - web only
+      observer.observe(node)
+      return () => observer.disconnect()
+    } else {
+      // On native, delay slightly to account for layout shifts during hydration
+      const timeout = setTimeout(() => {
+        fireSeen()
+      }, 500)
+      return () => clearTimeout(timeout)
+    }
+  }, [isProfileHeaderContext, isLoading, error, profiles.length, fireSeen])
+
   const content = isLoading
     ? Array(maxLength)
         .fill(0)
@@ -292,6 +373,8 @@ export function ProfileGrid({
                   : 'InterstitialProfile',
                 recId,
                 position: index,
+                suggestedDid: profile.did,
+                category: null,
               })
             }}
             style={[
@@ -352,6 +435,8 @@ export function ProfileGrid({
                         location: 'Card',
                         recId,
                         position: index,
+                        suggestedDid: profile.did,
+                        category: null,
                       })
                     }}
                   />
@@ -368,6 +453,7 @@ export function ProfileGrid({
 
   return (
     <View
+      ref={containerRef}
       style={[
         !isProfileHeaderContext && a.border_t,
         t.atoms.border_contrast_low,

src/components/ProgressGuide/FollowDialog.tsx

@@ -1,11 +1,17 @@
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
-import {TextInput, useWindowDimensions, View} from 'react-native'
+import {
+  TextInput,
+  useWindowDimensions,
+  View,
+  type ViewToken,
+} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
 import {logEvent} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorSearch} from '#/state/queries/actor-search'
@@ -243,6 +249,43 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
     [moderationOpts],
   )
 
+  // Track seen profiles
+  const seenProfilesRef = useRef<Set<string>>(new Set())
+  const itemsRef = useRef(items)
+  itemsRef.current = items
+  const selectedInterestRef = useRef(selectedInterest)
+  selectedInterestRef.current = selectedInterest
+
+  const onViewableItemsChanged = useRef(
+    ({viewableItems}: {viewableItems: ViewToken[]}) => {
+      for (const viewableItem of viewableItems) {
+        const item = viewableItem.item as Item
+        if (item.type === 'profile') {
+          if (!seenProfilesRef.current.has(item.profile.did)) {
+            seenProfilesRef.current.add(item.profile.did)
+            const position = itemsRef.current.findIndex(
+              i => i.type === 'profile' && i.profile.did === item.profile.did,
+            )
+            logger.metric(
+              'suggestedUser:seen',
+              {
+                logContext: 'ProgressGuide',
+                recId: undefined,
+                position: position !== -1 ? position : 0,
+                suggestedDid: item.profile.did,
+                category: selectedInterestRef.current,
+              },
+              {statsig: true},
+            )
+          }
+        }
+      }
+    },
+  ).current
+  const viewabilityConfig = useRef({
+    itemVisiblePercentThreshold: 50,
+  }).current
+
   const onSelectTab = useCallback(
     (interest: string) => {
       setSelectedInterest(interest)
@@ -290,6 +333,8 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
       scrollIndicatorInsets={{top: headerHeight}}
       initialNumToRender={8}
       maxToRenderPerBatch={8}
+      onViewableItemsChanged={onViewableItemsChanged}
+      viewabilityConfig={viewabilityConfig}
     />
   )
 }
@@ -400,7 +445,7 @@ function HeaderTop({guide}: {guide?: Follow10ProgressGuide}) {
           style={[
             a.absolute,
             a.z_20,
-            web({right: -4}),
+            web({right: 8}),
             native({right: 0}),
             native({height: 32, width: 32, borderRadius: 16}),
           ]}