From c03c744008bc15be807ccb172801268bd24dae53 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Thu, 16 Nov 2023 15:50:57 -0800
Subject: Notifs refresh improvement (#1941)

* Show loading state in notifications

* Fix invalidation of notifs

* Move spinner below header

* Fix: dont show spinner on initial load
---
 src/view/com/notifications/Feed.tsx | 18 +++++++++++++++++-
 src/view/screens/Notifications.tsx  |  4 +++-
 2 files changed, 20 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx
index e82c654be..3daa53ec7 100644
--- a/src/view/com/notifications/Feed.tsx
+++ b/src/view/com/notifications/Feed.tsx
@@ -39,6 +39,7 @@ export function Feed({
   const {
     data,
     dataUpdatedAt,
+    isLoading,
     isFetching,
     isFetched,
     isError,
@@ -139,6 +140,21 @@ export function Feed({
     [onPressRetryLoadMore, dataUpdatedAt, moderationOpts],
   )
 
+  const showHeaderSpinner = !isPTRing && isFetching && !isLoading
+  const FeedHeader = React.useCallback(
+    () => (
+      <View>
+        {ListHeaderComponent ? <ListHeaderComponent /> : null}
+        {showHeaderSpinner ? (
+          <View style={{padding: 10}}>
+            <ActivityIndicator />
+          </View>
+        ) : null}
+      </View>
+    ),
+    [ListHeaderComponent, showHeaderSpinner],
+  )
+
   const FeedFooter = React.useCallback(
     () =>
       isFetchingNextPage ? (
@@ -168,7 +184,7 @@ export function Feed({
         data={items}
         keyExtractor={item => item._reactKey}
         renderItem={renderItem}
-        ListHeaderComponent={ListHeaderComponent}
+        ListHeaderComponent={FeedHeader}
         ListFooterComponent={FeedFooter}
         refreshControl={
           <RefreshControl
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 970882f12..c892ee4e3 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -47,7 +47,9 @@ export const NotificationsScreen = withAuthRequired(
 
     const onPressLoadLatest = React.useCallback(() => {
       scrollToTop()
-      queryClient.invalidateQueries({queryKey: NOTIFS_RQKEY()})
+      queryClient.invalidateQueries({
+        queryKey: NOTIFS_RQKEY(),
+      })
     }, [scrollToTop, queryClient])
 
     // on-visible setup
-- 
cgit 1.4.1