optimizing conversation load

app/mobile/src/api/getChannelTopics.js

@@ -1,6 +1,7 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';
 
 export async function getChannelTopics(server, token, channelId, revision, count, begin, end) {
+
   let rev = ''
   if (revision != null) {
     rev = `&revision=${revision}`

app/mobile/src/context/useChannelContext.hook.js

@@ -230,7 +230,7 @@ export function useChannelContext() {
     },
     setMarkerAndSync: async (channelId, marker, revision) => {
       const { guid } = access.current;
-      await store.actions.setChannelItemMarkerAndSync(guid, channelId, revision);
+      await store.actions.setChannelItemMarkerAndSync(guid, channelId, marker, revision);
       setChannelField(channelId, 'topicMarker', marker, 'syncRevision', revision);
     },
     setChannelFlag: async (channelId) => {

app/mobile/src/context/useConversationContext.hook.js

@@ -10,6 +10,7 @@ export function useConversationContext() {
   const COUNT = 64;
 
   const [state, setState] = useState({
+    loaded: false,
     offsync: false,
     topics: new Map(),
     card: null,
@@ -51,9 +52,7 @@ export function useConversationContext() {
         reset.current = false;
         loaded.current = false;
         topics.current = new Map();
-        if (!conversation) {
+        updateState({ loaded: false, offsync: false, topics: topics.current, card: null, channel: null });
-          updateState({ offsync: false, topics: topics.current, card: null, channel: null });
-        }
       }
 
       if (conversation) {
@@ -68,13 +67,15 @@ export function useConversationContext() {
             for (let topic of topicItems) {
               topics.current.set(topic.topicId, topic);
             }
-            updateState({ offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
 
             const { syncRevision, topicMarker } = channelValue;
             curSyncRevision.current = syncRevision;
             curTopicMarker.current = topicMarker;
             loaded.current = true;
           }
+          else {
+            setChannel = true;
+          }
         }
         else {
           console.log("failed to load conversation");
@@ -86,27 +87,34 @@ export function useConversationContext() {
           if (!curTopicMarker.current) {
             const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null);
             await setTopicDelta(cardId, channelId, delta.topics);
-            await setMarkerAndSync(cardId, channelId, delta.marker, topicRevision);
+            await setMarkerAndSync(cardId, channelId, delta.marker, delta.revision);
             curTopicMarker.current = delta.marker;
-            curSyncRevision.current = topicRevision;
+            curSyncRevision.current = delta.revision;
+            updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
           }
-          if (loadMore && marker) {
+          else if (loadMore && marker) {
             const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, curTopicMarker.current);
             await setTopicDelta(cardId, channelId, delta.topics);
             await setTopicMarker(cardId, channelId, delta.marker);
             curTopicMarker.current = delta.marker;
+            updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
           }
-          if (ignoreRevision || topicRevision > curSyncRevision.current) {
+          else if (ignoreRevision || topicRevision > curSyncRevision.current) {
             const delta = await getTopicDelta(cardId, channelId, curSyncRevision.current, null, curTopicMarker.current, null);
             await setTopicDelta(cardId, channelId, delta.topics);
             await setSyncRevision(cardId, channelId, delta.revision);
             curSyncRevision.current = delta.revision;
+            updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
+
+console.log("HEADER", delta);
+          }
+          else {
+            updateState({ loaded: true, offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
           }
-          updateState({ offsync: false, topics: topics.current, card: cardValue, channel: channelValue });
         }
         catch(err) {
           console.log(err);
-          updateState({ offysnc: true });
+          updateState({ loaded: true, offysnc: true });
           syncing.current = false;
           return
         }

app/mobile/src/context/useStoreContext.hook.js

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef, useContext } from 'react';
 import SQLite from "react-native-sqlite-storage";
 
-const DATABAG_DB = 'db_v_116.db';
+const DATABAG_DB = 'db_v_123.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});

app/mobile/src/session/conversation/Conversation.jsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useContext } from 'react';
-import { FlatList, View, Text, TouchableOpacity } from 'react-native';
+import { ActivityIndicator, FlatList, View, Text, TouchableOpacity } from 'react-native';
 import { ConversationContext } from 'context/ConversationContext';
 import { useConversation } from './useConversation.hook';
 import { styles } from './Conversation.styled';
@@ -44,7 +44,9 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
       navigation.setOptions({
         headerTitle: () => (
           <View style={styles.title}>
-            <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
+            { state.loaded && (
+              <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
+            )}
           </View>
         ),
         headerRight: () => (
@@ -64,7 +66,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
     <View style={styles.container}>
       { !navigation && (
         <View style={styles.header}>
-          { ready && (
+          { state.loaded && (
             <TouchableOpacity style={styles.headertitle} onPress={openDetails}>
               <Logo src={state.logo} width={32} height={32} radius={2} />
               <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
@@ -78,18 +80,25 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
       )}
       <View style={styles.thread}>
         <View style={styles.messages}>
-          <FlatList style={styles.conversation}
+          { !state.loaded && (
-             contentContainerStyle={styles.topics}
+            <View style={styles.loading}>
-             data={state.topics}
+              <ActivityIndicator color={Colors.grey} size="large" />
-             inverted={true}
+            </View>
-             initialNumToRender={16}
+          )}
-             renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
+          { state.loaded && (
-               focus={() => actions.setFocus(item.topicId)} hosting={state.host == null}
+            <FlatList style={styles.conversation}
-               sealed={state.sealed} sealKey={state.sealKey}
+               contentContainerStyle={styles.topics}
-               remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}
+               data={state.topics}
-               report={actions.reportTopic} />}
+               inverted={true}
-            keyExtractor={item => item.topicId}
+               initialNumToRender={16}
-          />
+               renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
+                 focus={() => actions.setFocus(item.topicId)} hosting={state.host == null}
+                 sealed={state.sealed} sealKey={state.sealKey}
+                 remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic}
+                 report={actions.reportTopic} />}
+              keyExtractor={item => item.topicId}
+            />
+          )}
         </View>
         <AddTopic />
       </View>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -61,5 +61,11 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
+  loading: {
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -166,6 +166,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
 
   const unsealTopic = async (topicId, revision, topicDetail) => {
     try {
+console.log("UNSEAL", topicId);
       const channelDetail = conversation.state.channel?.detail;
       const seals = getChannelSeals(channelDetail?.data);
       const sealKey = account.state.sealKey;

app/mobile/src/session/conversation/useConversation.hook.js

@@ -9,6 +9,8 @@ export function useConversation() {
   const [state, setState] = useState({
     subject: null,
     logo: null,
+    topic: [],
+    loaded: false,
   });
 
   const updateState = (value) => {
@@ -21,6 +23,7 @@ export function useConversation() {
   const account = useContext(AccountContext);
 
   useEffect(() => {
+    const loaded = conversation.state.loaded;
     const cardId = conversation.state.card?.cardId;
     const profileGuid = profile.state.identity?.guid;
     const channel = conversation.state.channel;
@@ -42,7 +45,7 @@ export function useConversation() {
     });
     const filtered = sorted.filter(item => !(item.blocked === 1));
 
-    updateState({ logo, subject, topics: filtered });
+    updateState({ loaded, logo, subject, topics: filtered });
   }, [conversation.state, profile.state]);