Improve notification load behaviors (#1943)

* Dont use the stale cache for notifs-feed

* Add a delay to marking all read to avoid marking upcoming posts as read

* Trigger automatic notifications refresh when navigating to the tab, in certain conditions

src/state/queries/notifications/feed.ts

@@ -12,7 +12,6 @@ import {getAgent} from '../../session'
 import {useModerationOpts} from '../preferences'
 import {shouldFilterNotif} from './util'
 import {useMutedThreads} from '#/state/muted-threads'
-import {STALE} from '#/state/queries'
 
 const GROUPABLE_REASONS = ['like', 'repost', 'follow']
 const PAGE_SIZE = 30
@@ -60,7 +59,6 @@ export function useNotificationFeedQuery(opts?: {enabled?: boolean}) {
     QueryKey,
     RQPageParam
   >({
-    staleTime: STALE.INFINITY,
     queryKey: RQKEY(),
     async queryFn({pageParam}: {pageParam: RQPageParam}) {
       const res = await getAgent().listNotifications({

src/view/com/notifications/Feed.tsx

@@ -54,9 +54,12 @@ export function Feed({
 
   // mark all read on fresh data
   React.useEffect(() => {
+    let cleanup
     if (firstItem) {
-      markAllRead()
+      const to = setTimeout(() => markAllRead(), 250)
+      cleanup = () => clearTimeout(to)
     }
+    return cleanup
   }, [firstItem, markAllRead])
 
   const items = React.useMemo(() => {

src/view/shell/Drawer.tsx

@@ -14,6 +14,7 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
+import {useQueryClient} from '@tanstack/react-query'
 import {s, colors} from 'lib/styles'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {
@@ -50,6 +51,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
 import {useInviteCodesQuery} from '#/state/queries/invites'
+import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 
 export function DrawerProfileCard({
   account,
@@ -104,6 +106,7 @@ export function DrawerContent() {
   const theme = useTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const queryClient = useQueryClient()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {track} = useAnalytics()
@@ -135,12 +138,18 @@ export function DrawerContent() {
         } else if (tabState === TabState.Inside) {
           navigation.dispatch(StackActions.popToTop())
         } else {
+          if (tab === 'Notifications') {
+            // fetch new notifs on view
+            queryClient.invalidateQueries({
+              queryKey: NOTIFS_RQKEY(),
+            })
+          }
           // @ts-ignore must be Home, Search, Notifications, or MyProfile
           navigation.navigate(`${tab}Tab`)
         }
       }
     },
-    [track, navigation, setDrawerOpen, currentAccount],
+    [track, navigation, setDrawerOpen, currentAccount, queryClient],
   )
 
   const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])

src/view/shell/bottom-bar/BottomBar.tsx

@@ -1,6 +1,7 @@
 import React, {ComponentProps} from 'react'
 import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'
 import Animated from 'react-native-reanimated'
+import {useQueryClient} from '@tanstack/react-query'
 import {StackActions} from '@react-navigation/native'
 import {BottomTabBarProps} from '@react-navigation/bottom-tabs'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -30,6 +31,7 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {emitSoftReset} from '#/state/events'
 import {useSession} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
+import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
@@ -38,6 +40,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const {currentAccount} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const queryClient = useQueryClient()
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
   const {footerHeight} = useShellLayout()
@@ -57,10 +60,16 @@ export function BottomBar({navigation}: BottomTabBarProps) {
       } else if (tabState === TabState.Inside) {
         navigation.dispatch(StackActions.popToTop())
       } else {
+        if (tab === 'Notifications') {
+          // fetch new notifs on view
+          queryClient.invalidateQueries({
+            queryKey: NOTIFS_RQKEY(),
+          })
+        }
         navigation.navigate(`${tab}Tab`)
       }
     },
-    [track, navigation],
+    [track, navigation, queryClient],
   )
   const onPressHome = React.useCallback(() => onPressTab('Home'), [onPressTab])
   const onPressSearch = React.useCallback(

src/view/shell/desktop/LeftNav.tsx

@@ -45,6 +45,8 @@ import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useComposerControls} from '#/state/shell/composer'
 import {useFetchHandle} from '#/state/queries/handle'
 import {emitSoftReset} from '#/state/events'
+import {useQueryClient} from '@tanstack/react-query'
+import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 
 function ProfileCard() {
   const {currentAccount} = useSession()
@@ -118,6 +120,7 @@ interface NavItemProps {
 }
 function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
   const pal = usePalette('default')
+  const queryClient = useQueryClient()
   const {currentAccount} = useSession()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const [pathName] = React.useMemo(() => router.matchPath(href), [href])
@@ -143,10 +146,16 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
       if (isCurrent) {
         emitSoftReset()
       } else {
+        if (href === '/notifications') {
+          // fetch new notifs on view
+          queryClient.invalidateQueries({
+            queryKey: NOTIFS_RQKEY(),
+          })
+        }
         onPress()
       }
     },
-    [onPress, isCurrent],
+    [onPress, isCurrent, queryClient, href],
   )
 
   return (