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/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 841a49d38..8f6998abf 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/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 (