diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index e82c654be4..3daa53ec7c 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( + () => ( + + {ListHeaderComponent ? : null} + {showHeaderSpinner ? ( + + + + ) : null} + + ), + [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={ { scrollToTop() - queryClient.invalidateQueries({queryKey: NOTIFS_RQKEY()}) + queryClient.invalidateQueries({ + queryKey: NOTIFS_RQKEY(), + }) }, [scrollToTop, queryClient]) // on-visible setup