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

1 files changed, 10 insertions, 1 deletions

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index a67a105bb..af4da668d 100644
--- a/src/view/shell/Drawer.tsx
+++ b/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])