Multiple notifications fixes (#2154)

* Dont reset notifications feed on push notification event

* Dont separate notifications by read state to avoid jank

* On notifications screen focus, check latest and only rerender if not scrolled down

* Reuse the cached notifs page when its not stale

* Bump ios build number

* Improve comments

* Change the 'mark all read' condition to avoid firing too early

1 files changed, 14 insertions, 3 deletions

diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 0af6484f3..fceaa60c2 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -37,6 +37,7 @@ export function NotificationsScreen({}: Props) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
   const scrollElRef = React.useRef<FlatList>(null)
+  const checkLatestRef = React.useRef<() => void | null>()
   const {screen} = useAnalytics()
   const pal = usePalette('default')
   const {isDesktop} = useWebMediaQueries()
@@ -63,16 +64,26 @@ export function NotificationsScreen({}: Props) {
     }
   }, [scrollToTop, queryClient, unreadApi, hasNew])
 
+  const onFocusCheckLatest = React.useCallback(() => {
+    // on focus, check for latest, but only invalidate if the user
+    // isnt scrolled down to avoid moving content underneath them
+    unreadApi.checkUnread({invalidate: !isScrolledDown})
+  }, [unreadApi, isScrolledDown])
+  checkLatestRef.current = onFocusCheckLatest
+
   // on-visible setup
   // =
   useFocusEffect(
     React.useCallback(() => {
       setMinimalShellMode(false)
-      logger.debug('NotificationsScreen: Updating feed')
+      logger.debug('NotificationsScreen: Focus')
       screen('Notifications')
-      return listenSoftReset(onPressLoadLatest)
-    }, [screen, onPressLoadLatest, setMinimalShellMode]),
+      checkLatestRef.current?.()
+    }, [screen, setMinimalShellMode]),
   )
+  React.useEffect(() => {
+    return listenSoftReset(onPressLoadLatest)
+  }, [onPressLoadLatest])
 
   const ListHeaderComponent = React.useCallback(() => {
     if (isDesktop) {