rendering activity indicator

app/client/mobile/src/conversation/Conversation.styled.ts

@@ -6,13 +6,32 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
+    minHeight: 0,
   },
   messages: {
     paddingBottom: 64,
   },
   thread: {
-    width: '100%',
+    display: 'flex',
     flexGrow: 1,
+    minHeight: 0,
+    height: '50%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  more: {
+    paddingTop: 16,
+    position: 'absolute',
+    top: 0,
+  },
+  loading: {
+    position: 'absolute',
+  },
+  empty: {
+    position: 'absolute',
+    fontSize: 20,
+    color: Colors.placeholder,
   },
   add: {
     height: 72,

app/client/mobile/src/conversation/Conversation.tsx

@@ -4,6 +4,7 @@ import {styles} from './Conversation.styled';
 import {useConversation} from './useConversation.hook';
 import {Message} from '../message/Message';
 import {Icon, Text, IconButton, Divider} from 'react-native-paper';
+import { ActivityIndicator } from 'react-native-paper';
 
 const SCROLL_THRESHOLD = 16;
 
@@ -91,33 +92,47 @@ export function Conversation({close}: {close: ()=>void}) {
         {close && <View style={styles.iconSpace} />}
       </SafeAreaView>
       <Divider style={styles.border} bold={true} />
-      <FlatList
-        inverted
-        ref={thread}
-        onScroll={onScroll}
-        style={styles.messages}
-        data={state.topics}
-        initialNumToRender={32}
-        showsVerticalScrollIndicator={false}
-        onContentSizeChange={onContent}
-        onEndReached={loadMore}
-        onEndReachedThreshold={0}
-        contentContainerStyle={styles.messages}
-        renderItem={({item}) => {
-          const { host } = state;
-          const card = state.cards.get(item.guid) || null;
-          const profile = state.profile?.guid === item.guid ? state.profile : null;
-          return (
-            <Message
-              topic={item}
-              card={card}
-              profile={profile}
-              host={host}
-            />
-          )
-        }}
-        keyExtractor={topic => (topic.topicId)}
-      />
+      <View style={styles.thread}>
+        <FlatList
+          inverted
+          ref={thread}
+          onScroll={onScroll}
+          data={state.topics}
+          initialNumToRender={32}
+          showsVerticalScrollIndicator={false}
+          onContentSizeChange={onContent}
+          onEndReached={loadMore}
+          onEndReachedThreshold={0}
+          contentContainerStyle={styles.messages}
+          renderItem={({item}) => {
+            const { host } = state;
+            const card = state.cards.get(item.guid) || null;
+            const profile = state.profile?.guid === item.guid ? state.profile : null;
+            return (
+              <Message
+                topic={item}
+                card={card}
+                profile={profile}
+                host={host}
+              />
+            )
+          }}
+          keyExtractor={topic => (topic.topicId)}
+        />
+        { state.loaded && state.topics.length === 0 && ( 
+          <Text style={styles.empty}>{state.strings.noMessages}</Text>
+        )} 
+        { !state.loaded && (
+          <View style={styles.loading}>
+            <ActivityIndicator size="large" />
+          </View>
+        )}
+        { more && (
+          <View style={styles.more}>
+            <ActivityIndicator />
+          </View>
+        )}
+      </View>
       <TouchableOpacity style={styles.add} onPress={() => thread.current.scrollToEnd()}>
         <Text>ADD</Text>
       </TouchableOpacity>

app/client/mobile/src/conversation/useConversation.hook.ts

@@ -33,7 +33,6 @@ export function useConversation() {
     focus: null as Focus | null,
     layout: null,
     topics: [] as Topic[],
-    topicCount: 0,
     loaded: false,
     loadingMore: false,
     profile: null as Profile | null,
@@ -102,7 +101,7 @@ export function useConversation() {
               return 0;
             }
           });
-          updateState({ topics: sorted, topicCount: topics.length, loaded: true });
+          updateState({ topics: sorted, loaded: true });
         }
       }
       const setCards = (cards: Card[]) => {