Fix `onEndReached` not firing sometimes on web (#4728)

* handle off screen visibility observer.

* Revert "handle off screen visibility observer."

This reverts commit e499ea0ed66b31964f79261b41f58a288b0cdb6f.

* key ftw

* Remove special case

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

2 files changed, 2 insertions, 10 deletions

diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index 90f2785b2..e2f12e84f 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -25,7 +25,6 @@ import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
 import {CenteredView} from '#/view/com/util/Views'
 import {FeedItem} from './FeedItem'
 import hairlineWidth = StyleSheet.hairlineWidth
-import {isWeb} from '#/platform/detection'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
@@ -183,15 +182,7 @@ export function Feed({
         refreshing={isPTRing}
         onRefresh={onRefresh}
         onEndReached={onEndReached}
-        onEndReachedThreshold={
-          /*
-          NOTE:
-          web's intersection observer struggles with the 2x threshold
-          and leads to missed pagination, so we keep it <1
-          -prf
-          */
-          isWeb ? 0.6 : 2
-        }
+        onEndReachedThreshold={2}
         onScrolledDownChange={onScrolledDownChange}
         contentContainerStyle={s.contentContainer}
         // @ts-ignore our .web version only -prf
diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
index e917ab1d3..f2b2add37 100644
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@@ -365,6 +365,7 @@ function ListImpl<ItemT>(
             root={containWeb ? nativeRef : null}
             onVisibleChange={onTailVisibilityChange}
             bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
+            key={data?.length}
           />
         )}
         {footerComponent}