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

adding conversation loading indicator

Browse Source
This commit is contained in:
Roland Osborne 2022-08-30 12:48:33 -07:00
parent 1254e8f4d8
commit 28e19034fd
6 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
net/web/src/context/useConversationContext.hook.js
View File

@ -9,7 +9,8 @@ export function useConversationContext() {
const [state, setState] = useState({ const [state, setState] = useState({
init: false, init: false,
error: false, error: false,
loading: false, loadingInit: true,
loadingMore: false,
cardId: null, cardId: null,
channelId: null, channelId: null,
subject: null, subject: null,
@ -240,7 +241,7 @@ export function useConversationContext() {
const ev = events.current.shift(); const ev = events.current.shift();
await setTopics(ev); await setTopics(ev);
} }
updateState({ loading: false }); updateState({ loadingInit: false, loadingMore: false });
serialize.current--; serialize.current--;
} }
}; };
@ -253,14 +254,14 @@ export function useConversationContext() {
const actions = { const actions = {
setConversationId: (cardId, channelId) => { setConversationId: (cardId, channelId) => {
view.current += 1; view.current += 1;
updateState({ init: false, loading: true }); updateState({ init: false, loadingInit: true });
events.current = [{ type: EVENT_OPEN, data: { cardId, channelId }}]; events.current = [{ type: EVENT_OPEN, data: { cardId, channelId }}];
updateState({ subject: null, cardId, channelId, topics: new Map() }); updateState({ subject: null, cardId, channelId, topics: new Map() });
topics.current = new Map(); topics.current = new Map();
updateConversation(); updateConversation();
}, },
addHistory: () => { addHistory: () => {
updateState({ loading: true }); updateState({ loadingMore: true });
events.current.push({ type: EVENT_MORE }); events.current.push({ type: EVENT_MORE });
updateConversation(); updateConversation();
}, },

12
net/web/src/session/conversation/Conversation.jsx
View File

@ -5,7 +5,7 @@ import { Logo } from 'logo/Logo';
import { AddTopic } from './addTopic/AddTopic'; import { AddTopic } from './addTopic/AddTopic';
import { VirtualList } from './virtualList/VirtualList'; import { VirtualList } from './virtualList/VirtualList';
import { TopicItem } from './topicItem/TopicItem'; import { TopicItem } from './topicItem/TopicItem';
import { Progress } from 'antd'; import { Progress, Spin } from 'antd';
export function Conversation({ closeConversation, openDetails, cardId, channelId }) { export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
@ -38,6 +38,16 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
<div class="thread"> <div class="thread">
<VirtualList id={`${cardId}:${channelId}`} <VirtualList id={`${cardId}:${channelId}`}
items={state.topics} itemRenderer={topicRenderer} loadMore={actions.more} /> items={state.topics} itemRenderer={topicRenderer} loadMore={actions.more} />
{ state.loadingInit && (
<div class="loading">
<Spin size="large" delay={250} />
</div>
)}
{ state.loadingMore && (
<div class="loading">
<Spin size="large" delay={500} />
</div>
)}
</div> </div>
<div class="divider"> <div class="divider">
<div class="line" /> <div class="line" />

12
net/web/src/session/conversation/Conversation.styled.js
View File

@ -51,8 +51,20 @@ export const ConversationWrapper = styled.div`
} }
.thread { .thread {
position: relative;
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
.loading {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}
} }
.divider { .divider {

5
net/web/src/session/conversation/useConversation.hook.js
View File

@ -13,6 +13,8 @@ export function useConversation(cardId, channelId) {
logo: null, logo: null,
subject: null, subject: null,
topics: [], topics: [],
loadingInit: false,
loadingMore: false,
upload: false, upload: false,
uploadError: false, uploadError: false,
uploadPercent: 0, uploadPercent: 0,
@ -115,7 +117,8 @@ export function useConversation(cardId, channelId) {
} }
return 1; return 1;
}); });
updateState({ topics }); const { loadingInit, loadingMore } = conversation.state;
updateState({ topics, loadingInit, loadingMore });
}, [conversation]); }, [conversation]);
const actions = { const actions = {

3
net/web/src/session/conversation/virtualList/VirtualList.jsx
View File

@ -29,9 +29,10 @@ export function VirtualList({ id, items, itemRenderer, loadMore }) {
const [scrollPos, setScrollPos] = useState(0); const [scrollPos, setScrollPos] = useState(0);
useEffect(() => { useEffect(() => {
actions.clearSlots();
scrollTop.current = 8192; scrollTop.current = 8192;
list.current.scrollTo({ top: 8192, left: 0 }); list.current.scrollTo({ top: 8192, left: 0 });
}, []); }, [id]);
useEffect(() => { useEffect(() => {

6
net/web/yarn.lock
View File

@ -2949,9 +2949,9 @@ caniuse-api@^3.0.0:
lodash.uniq "^4.5.0" lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313: caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001297, caniuse-lite@^1.0.30001313:
version "1.0.30001314" version "1.0.30001385"
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001385.tgz"
integrity sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw== integrity sha512-MpiCqJGhBkHgpyimE9GWmZTnyHyEEM35u115bD3QBrXpjvL/JgcP8cUhKJshfmg4OtEHFenifcK5sZayEw5tvQ==
case-sensitive-paths-webpack-plugin@^2.4.0: case-sensitive-paths-webpack-plugin@^2.4.0:
version "2.4.0" version "2.4.0"