Add 'loading more' spinner to feeds

src/view/com/posts/Feed.tsx

@@ -1,6 +1,12 @@
 import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
-import {View, FlatList, StyleProp, ViewStyle} from 'react-native'
+import {
+  ActivityIndicator,
+  View,
+  FlatList,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
 import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {EmptyState} from '../util/EmptyState'
 import {ErrorMessage} from '../util/ErrorMessage'
@@ -57,6 +63,14 @@ export const Feed = observer(function Feed({
       data = [COMPOSE_PROMPT_ITEM].concat(feed.feed)
     }
   }
+  const FeedFooter = () =>
+    feed.isLoading ? (
+      <View style={{paddingTop: 20}}>
+        <ActivityIndicator />
+      </View>
+    ) : (
+      <View />
+    )
   return (
     <View style={style}>
       {!data && <ComposePrompt onPressCompose={onPressCompose} />}
@@ -75,6 +89,7 @@ export const Feed = observer(function Feed({
           data={data}
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
+          ListFooterComponent={FeedFooter}
           refreshing={feed.isRefreshing}
           contentContainerStyle={{paddingBottom: 100}}
           onRefresh={onRefresh}

src/view/com/util/ViewSelector.tsx

@@ -1,9 +1,8 @@
-import React, {useEffect, useState, useMemo} from 'react'
+import React, {useEffect, useState} from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
+import {FlatList, View} from 'react-native'
 import {Selector} from './Selector'
 import {HorzSwipe} from './gestures/HorzSwipe'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
-import {useStores} from '../../../state'
 
 const HEADER_ITEM = {_reactKey: '__header__'}
 const SELECTOR_ITEM = {_reactKey: '__selector__'}
@@ -16,6 +15,7 @@ export function ViewSelector({
   swipeEnabled,
   renderHeader,
   renderItem,
+  ListFooterComponent,
   onSelectView,
   onRefresh,
   onEndReached,
@@ -26,11 +26,15 @@ export function ViewSelector({
   swipeEnabled?: boolean
   renderHeader?: () => JSX.Element
   renderItem: (item: any) => JSX.Element
+  ListFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined
   onSelectView?: (viewIndex: number) => void
   onRefresh?: () => void
   onEndReached?: (info: {distanceFromEnd: number}) => void
 }) {
-  const store = useStores()
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
   const panX = useAnimatedValue(0)
 
@@ -83,6 +87,7 @@ export function ViewSelector({
         data={data}
         keyExtractor={item => item._reactKey}
         renderItem={renderItemInternal}
+        ListFooterComponent={ListFooterComponent}
         stickyHeaderIndices={STICKY_HEADER_INDICES}
         refreshing={refreshing}
         onRefresh={onRefresh}
@@ -91,5 +96,3 @@ export function ViewSelector({
     </HorzSwipe>
   )
 }
-
-const styles = StyleSheet.create({})

src/view/screens/Profile.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState, useMemo} from 'react'
-import {StyleSheet, Text, View} from 'react-native'
+import {ActivityIndicator, StyleSheet, Text, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {ViewSelector} from '../com/util/ViewSelector'
@@ -97,6 +97,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     return <ProfileHeader view={uiState.profile} onRefreshAll={onRefresh} />
   }
   let renderItem
+  let Footer
   let items: any[] = []
   if (uiState) {
     if (uiState.isInitialLoading) {
@@ -132,6 +133,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
           }
           if (!uiState.feed.hasMore) {
             items = items.concat([END_ITEM])
+          } else {
+            Footer = LoadingMoreFooter
           }
           renderItem = (item: any) => {
             if (item === END_ITEM) {
@@ -246,6 +249,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
           items={items}
           renderHeader={renderHeader}
           renderItem={renderItem}
+          ListFooterComponent={Footer}
           refreshing={uiState.isRefreshing || false}
           onSelectView={onSelectView}
           onRefresh={onRefresh}
@@ -258,6 +262,14 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   )
 })
 
+function LoadingMoreFooter() {
+  return (
+    <View style={{paddingVertical: 20}}>
+      <ActivityIndicator />
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',