[Statsig] Make gate checks lazily (#3594)

src/view/com/feeds/FeedPage.tsx

@@ -53,6 +53,7 @@ export function FeedPage({
   const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<ListMethods>(null)
   const [hasNew, setHasNew] = React.useState(false)
+  const gate = useGate()
 
   const scrollToTop = React.useCallback(() => {
     scrollElRef.current?.scrollToOffset({
@@ -105,9 +106,10 @@ export function FeedPage({
 
   let feedPollInterval
   if (
-    useGate('disable_poll_on_discover') &&
     feed === // Discover
-      'feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot'
+      'feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot' &&
+    // TODO: This gate check is still too early. Move it to where the polling happens.
+    gate('disable_poll_on_discover')
   ) {
     feedPollInterval = undefined
   } else {

src/view/com/post-thread/PostThreadFollowBtn.tsx

@@ -48,7 +48,7 @@ function PostThreadFollowBtnLoaded({
     'PostThreadItem',
   )
   const requireAuth = useRequireAuth()
-  const showFollowBackLabel = useGate('show_follow_back_label')
+  const gate = useGate()
 
   const isFollowing = !!profile.viewer?.following
   const isFollowedBy = !!profile.viewer?.followedBy
@@ -140,7 +140,7 @@ function PostThreadFollowBtnLoaded({
             style={[!isFollowing ? palInverted.text : pal.text, s.bold]}
             numberOfLines={1}>
             {!isFollowing ? (
-              showFollowBackLabel && isFollowedBy ? (
+              isFollowedBy && gate('show_follow_back_label') ? (
                 <Trans>Follow Back</Trans>
               ) : (
                 <Trans>Follow</Trans>

src/view/com/util/List.tsx

@@ -40,8 +40,8 @@ function ListImpl<ItemT>(
   const isScrolledDown = useSharedValue(false)
   const contextScrollHandlers = useScrollHandlers()
   const pal = usePalette('default')
-  const showsVerticalScrollIndicator =
-    !useGate('hide_vertical_scroll_indicators') || isWeb
+  const gate = useGate()
+
   function handleScrolledDownChange(didScrollDown: boolean) {
     onScrolledDownChange?.(didScrollDown)
   }
@@ -97,7 +97,9 @@ function ListImpl<ItemT>(
       scrollEventThrottle={1}
       style={style}
       ref={ref}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      showsVerticalScrollIndicator={
+        isWeb || !gate('hide_vertical_scroll_indicators')
+      }
     />
   )
 }

src/view/com/util/Views.jsx

@@ -10,14 +10,11 @@ export function CenteredView(props) {
 }
 
 export function ScrollView(props) {
-  const showsVerticalScrollIndicator = !useGate(
-    'hide_vertical_scroll_indicators',
-  )
-
+  const gate = useGate()
   return (
     <Animated.ScrollView
       {...props}
-      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      showsVerticalScrollIndicator={!gate('hide_vertical_scroll_indicators')}
     />
   )
 }

src/view/screens/Home.tsx

@@ -111,21 +111,20 @@ function HomeScreenReady({
     }),
   )
 
-  const disableMinShellOnForegrounding = useGate(
-    'disable_min_shell_on_foregrounding',
-  )
+  const gate = useGate()
   React.useEffect(() => {
-    if (disableMinShellOnForegrounding) {
-      const listener = AppState.addEventListener('change', nextAppState => {
-        if (nextAppState === 'active') {
+    const listener = AppState.addEventListener('change', nextAppState => {
+      if (nextAppState === 'active') {
+        // TODO: Check if minimal shell is on before logging an exposure.
+        if (gate('disable_min_shell_on_foregrounding')) {
           setMinimalShellMode(false)
         }
-      })
-      return () => {
-        listener.remove()
       }
+    })
+    return () => {
+      listener.remove()
     }
-  }, [setMinimalShellMode, disableMinShellOnForegrounding])
+  }, [setMinimalShellMode, gate])
 
   const onPageSelected = React.useCallback(
     (index: number) => {

src/view/screens/ModerationBlockedAccounts.tsx

@@ -38,8 +38,7 @@ export function ModerationBlockedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
-  const showsVerticalScrollIndicator =
-    !useGate('hide_vertical_scroll_indicators') || isWeb
+  const gate = useGate()
 
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
@@ -169,7 +168,9 @@ export function ModerationBlockedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
-          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          showsVerticalScrollIndicator={
+            isWeb || !gate('hide_vertical_scroll_indicators')
+          }
         />
       )}
     </CenteredView>

src/view/screens/ModerationMutedAccounts.tsx

@@ -38,8 +38,8 @@ export function ModerationMutedAccounts({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen} = useAnalytics()
-  const showsVerticalScrollIndicator =
-    !useGate('hide_vertical_scroll_indicators') || isWeb
+  const gate = useGate()
+
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {
     data,
@@ -167,7 +167,9 @@ export function ModerationMutedAccounts({}: Props) {
           )}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
-          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          showsVerticalScrollIndicator={
+            isWeb || !gate('hide_vertical_scroll_indicators')
+          }
         />
       )}
     </CenteredView>

src/view/screens/Profile.tsx

@@ -143,7 +143,7 @@ function ProfileScreenLoaded({
   const setMinimalShellMode = useSetMinimalShellMode()
   const {openComposer} = useComposerControls()
   const {screen, track} = useAnalytics()
-  const shouldUseScrollableHeader = useGate('new_profile_scroll_component')
+  const gate = useGate()
   const {
     data: labelerInfo,
     error: labelerError,
@@ -317,7 +317,7 @@ function ProfileScreenLoaded({
   // =
 
   const renderHeader = React.useCallback(() => {
-    if (shouldUseScrollableHeader) {
+    if (gate('new_profile_scroll_component')) {
       return (
         <ExpoScrollForwarderView scrollViewTag={scrollViewTag}>
           <ProfileHeader
@@ -343,7 +343,7 @@ function ProfileScreenLoaded({
       )
     }
   }, [
-    shouldUseScrollableHeader,
+    gate,
     scrollViewTag,
     profile,
     labelerInfo,

src/view/screens/Search/Search.tsx

@@ -210,7 +210,8 @@ function useSuggestedFollowsV2(): [
 
 function SearchScreenSuggestedFollows() {
   const pal = usePalette('default')
-  const useSuggestedFollows = useGate('use_new_suggestions_endpoint')
+  const gate = useGate()
+  const useSuggestedFollows = gate('use_new_suggestions_endpoint')
     ? // Conditional hook call here is *only* OK because useGate()
       // result won't change until a remount.
       useSuggestedFollowsV2
@@ -406,8 +407,7 @@ export function SearchScreenInner({
   const {isDesktop} = useWebMediaQueries()
   const [activeTab, setActiveTab] = React.useState(0)
   const {_} = useLingui()
-
-  const isNewSearch = useGate('new_search')
+  const gate = useGate()
 
   const onPageSelected = React.useCallback(
     (index: number) => {
@@ -420,7 +420,7 @@ export function SearchScreenInner({
 
   const sections = React.useMemo(() => {
     if (!query) return []
-    if (isNewSearch) {
+    if (gate('new_search')) {
       if (hasSession) {
         return [
           {
@@ -487,7 +487,7 @@ export function SearchScreenInner({
         ]
       }
     }
-  }, [hasSession, isNewSearch, _, query, activeTab])
+  }, [hasSession, gate, _, query, activeTab])
 
   if (hasSession) {
     return query ? (