martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 20:49:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added conversation loading indicator

Browse Source
This commit is contained in:
Roland Osborne 2022-10-20 15:09:10 -07:00
parent 95e1f55121
commit bd0d6e07d8
5 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/mobile/src/context/useConversationContext.hook.js
View File

@ -15,6 +15,7 @@ export function useConversationContext() {
topics: new Map(), topics: new Map(),
created: null, created: null,
host: null, host: null,
init: false,
}); });
const store = useContext(StoreContext); const store = useContext(StoreContext);
const card = useContext(CardContext); const card = useContext(CardContext);
@ -173,7 +174,7 @@ export function useConversationContext() {
else { else {
channel.actions.setReadRevision(channelId, revision.current); channel.actions.setReadRevision(channelId, revision.current);
} }
updateState({ topics: topics.current }); updateState({ topics: topics.current, init: true });
} }
syncing.current = false; syncing.current = false;
@ -306,7 +307,7 @@ export function useConversationContext() {
setView.current++; setView.current++;
conversationId.current = selected; conversationId.current = selected;
reset.current = true; reset.current = true;
updateState({ subject: null, logo: null, contacts: [], topics: new Map() }); updateState({ subject: null, logo: null, contacts: [], topics: new Map(), init: false });
sync(); sync();
const { cardId, channelId, revision } = selected; const { cardId, channelId, revision } = selected;
if (cardId) { if (cardId) {

2
app/mobile/src/context/useStoreContext.hook.js
View File

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

7
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -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 { useKeepAwake } from 'expo-keep-awake';
import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp'; import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
import { memo, useState, useRef, useEffect } from 'react'; import { memo, useState, useRef, useEffect } from 'react';
@ -80,6 +80,11 @@ export function ConversationBody() {
remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} />} remove={actions.removeTopic} update={actions.editTopic} block={actions.blockTopic} />}
keyExtractor={item => item.topicId} keyExtractor={item => item.topicId}
/> />
{ !state.init && (
<View style={styles.loading}>
<ActivityIndicator size="large" color={Colors.primary} />
</View>
)}
<View> <View>
<AddTopic /> <AddTopic />
<View style={styles.latchbar}> <View style={styles.latchbar}>

7
app/mobile/src/session/conversation/Conversation.styled.js
View File

@ -180,5 +180,12 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
loading: {
position: 'absolute',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
}) })

17
app/mobile/src/session/conversation/useConversation.hook.js
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useContext } from 'react'; import { useRef, useState, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext'; import { ConversationContext } from 'context/ConversationContext';
export function useConversation() { export function useConversation() {
@ -15,8 +15,10 @@ export function useConversation() {
editTopicId: null, editTopicId: null,
editData: null, editData: null,
editMessage: null, editMessage: null,
init: false,
}); });
const delay = useRef(null);
const conversation = useContext(ConversationContext); const conversation = useContext(ConversationContext);
const updateState = (value) => { const updateState = (value) => {
@ -24,7 +26,7 @@ export function useConversation() {
} }
useEffect(() => { useEffect(() => {
const { subject, logo, topics, host } = conversation.state; const { subject, logo, topics, host, init } = conversation.state;
const items = Array.from(topics.values()); const items = Array.from(topics.values());
const sorted = items.sort((a, b) => { const sorted = items.sort((a, b) => {
const aTimestamp = a?.detail?.created; const aTimestamp = a?.detail?.created;
@ -39,6 +41,17 @@ export function useConversation() {
}); });
const filtered = sorted.filter(item => !(item.blocked === 1)); const filtered = sorted.filter(item => !(item.blocked === 1));
updateState({ topics, subject, logo, host, topics: filtered }); 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]); }, [conversation]);
const actions = { const actions = {