From bd0d6e07d832a27f40124717d38f2defe2365c72 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Thu, 20 Oct 2022 15:09:10 -0700
Subject: [PATCH] added conversation loading indicator

---
 .../src/context/useConversationContext.hook.js  |  5 +++--
 app/mobile/src/context/useStoreContext.hook.js  |  2 +-
 .../src/session/conversation/Conversation.jsx   |  7 ++++++-
 .../session/conversation/Conversation.styled.js |  7 +++++++
 .../conversation/useConversation.hook.js        | 17 +++++++++++++++--
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js
index 0e19556e..1f2d9d68 100644
--- a/app/mobile/src/context/useConversationContext.hook.js
+++ b/app/mobile/src/context/useConversationContext.hook.js
@@ -15,6 +15,7 @@ export function useConversationContext() {
     topics: new Map(),
     created: null,
     host: null,
+    init: false,
   });
   const store = useContext(StoreContext);
   const card = useContext(CardContext);
@@ -173,7 +174,7 @@ export function useConversationContext() {
               else {
                 channel.actions.setReadRevision(channelId, revision.current);
               }
-              updateState({ topics: topics.current });
+              updateState({ topics: topics.current, init: true });
             }
 
             syncing.current = false;
@@ -306,7 +307,7 @@ export function useConversationContext() {
         setView.current++;
         conversationId.current = selected;
         reset.current = true;
-        updateState({ subject: null, logo: null, contacts: [], topics: new Map() });
+        updateState({ subject: null, logo: null, contacts: [], topics: new Map(), init: false });
         sync();
         const { cardId, channelId, revision } = selected;
         if (cardId) {
diff --git a/app/mobile/src/context/useStoreContext.hook.js b/app/mobile/src/context/useStoreContext.hook.js
index 873a4bab..27432c77 100644
--- a/app/mobile/src/context/useStoreContext.hook.js
+++ b/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 = 'databag_v044.db';
+const DATABAG_DB = 'databag_v045.db';
 
 export function useStoreContext() {
   const [state, setState] = useState({});
diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index d5aa148f..1617a852 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -1,4 +1,4 @@
-import { KeyboardAvoidingView, Modal, Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
+import { KeyboardAvoidingView, ActivityIndicator, Modal, Platform, TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { useKeepAwake } from 'expo-keep-awake';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
 import { memo, useState, useRef, useEffect } from 'react';
@@ -80,6 +80,11 @@ export function ConversationBody() {
              remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} />}
           keyExtractor={item => item.topicId}
         />
+        { !state.init && (
+          <View style={styles.loading}>
+            <ActivityIndicator size="large" color={Colors.primary} />
+          </View>
+        )}
         <View>
           <AddTopic />
           <View style={styles.latchbar}>
diff --git a/app/mobile/src/session/conversation/Conversation.styled.js b/app/mobile/src/session/conversation/Conversation.styled.js
index 6e0bae59..9a848092 100644
--- a/app/mobile/src/session/conversation/Conversation.styled.js
+++ b/app/mobile/src/session/conversation/Conversation.styled.js
@@ -180,5 +180,12 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  loading: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 })
 
diff --git a/app/mobile/src/session/conversation/useConversation.hook.js b/app/mobile/src/session/conversation/useConversation.hook.js
index e23e2649..925a6ce6 100644
--- a/app/mobile/src/session/conversation/useConversation.hook.js
+++ b/app/mobile/src/session/conversation/useConversation.hook.js
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useRef, useState, useEffect, useContext } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
 
 export function useConversation() {
@@ -15,8 +15,10 @@ export function useConversation() {
     editTopicId: null,
     editData: null,
     editMessage: null,
+    init: false,
   });
 
+  const delay = useRef(null);
   const conversation = useContext(ConversationContext);
 
   const updateState = (value) => {
@@ -24,7 +26,7 @@ export function useConversation() {
   }
 
   useEffect(() => {
-    const { subject, logo, topics, host } = conversation.state;
+    const { subject, logo, topics, host, init } = conversation.state;
     const items = Array.from(topics.values());
     const sorted = items.sort((a, b) => {
       const aTimestamp = a?.detail?.created;
@@ -39,6 +41,17 @@ export function useConversation() {
     });
     const filtered = sorted.filter(item => !(item.blocked === 1));
     updateState({ topics, subject, logo, host, topics: filtered });
+    if (init) {
+      clearTimeout(delay.current);
+      updateState({ init: true });
+    }
+    else {
+      if (!delay.current) {
+        delay.current = setTimeout(() => {
+          updateState({ init: false });
+        }, 500);
+      }
+    }
   }, [conversation]);
 
   const actions = {