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

display spinner when loading topics

Browse Source
This commit is contained in:
Roland Osborne 2022-04-26 14:22:50 -07:00
parent 19b05cd4e8
commit 8d0a242f3b
4 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
net/web/src/User/Conversation/Conversation.jsx
View File

@ -2,8 +2,8 @@ import React, { useState, useEffect, useRef } from 'react'
import { ConversationContextProvider } from '../../ConversationContext/ConversationContext'; import { ConversationContextProvider } from '../../ConversationContext/ConversationContext';
import { CloseOutlined, UserOutlined } from '@ant-design/icons'; import { CloseOutlined, UserOutlined } from '@ant-design/icons';
import { useConversation } from './useConversation.hook'; import { useConversation } from './useConversation.hook';
import { Button, Checkbox, Modal } from 'antd' import { Button, Checkbox, Modal, Spin } from 'antd'
import { ConversationWrapper, CloseButton, ListItem } from './Conversation.styled'; import { ConversationWrapper, CloseButton, ListItem, BusySpin } from './Conversation.styled';
import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized'; import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtualized';
import { AddTopic } from './AddTopic/AddTopic'; import { AddTopic } from './AddTopic/AddTopic';
import { VirtualList } from '../../VirtualList/VirtualList'; import { VirtualList } from '../../VirtualList/VirtualList';
@ -26,6 +26,7 @@ export function Conversation() {
</div> </div>
<div class="thread"> <div class="thread">
<VirtualList items={state.topics} itemRenderer={topicRenderer} /> <VirtualList items={state.topics} itemRenderer={topicRenderer} />
<BusySpin size="large" delay="1000" spinning={!state.init} />
</div> </div>
<AddTopic /> <AddTopic />
</ConversationWrapper> </ConversationWrapper>

7
net/web/src/User/Conversation/Conversation.styled.jsx
View File

@ -40,13 +40,13 @@ export const ConversationWrapper = styled.div`
} }
.thread { .thread {
position: relative;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
`; `;
export const CloseButton = styled(Button)` export const CloseButton = styled(Button)`
@ -60,3 +60,8 @@ export const ListItem = styled.div`
width: 64px; width: 64px;
`; `;
export const BusySpin = styled(Spin)`
position: absolute;
left: calc(50% - 16px);
top: calc(50% - 16px);
`;

6
net/web/src/User/Conversation/useConversation.hook.js
View File

@ -7,6 +7,7 @@ import { ChannelContext } from 'context/ChannelContext';
export function useConversation() { export function useConversation() {
const [state, setState] = useState({ const [state, setState] = useState({
init: false,
cardId: null, cardId: null,
channelId: null, channelId: null,
topics: [], topics: [],
@ -61,6 +62,7 @@ export function useConversation() {
} }
} }
updateState({ updateState({
init: true,
topics: Array.from(topics.current.values()), topics: Array.from(topics.current.values()),
}); });
revision.current = rev; revision.current = rev;
@ -95,8 +97,8 @@ export function useConversation() {
} }
} }
updateState({ updateState({
init: true,
topics: Array.from(topics.current.values()), topics: Array.from(topics.current.values()),
revision: conversation.revision
}); });
revision.current = rev; revision.current = rev;
} }
@ -108,7 +110,7 @@ export function useConversation() {
id.current = { cardId, channelId }; id.current = { cardId, channelId };
topics.current = new Map(); topics.current = new Map();
revision.current = null; revision.current = null;
updateState({ cardId, channelId, topics: [] }); updateState({ init: false, cardId, channelId, topics: [] });
} }
if (card.state.init && channel.state.init) { if (card.state.init && channel.state.init) {
if (cardId) { if (cardId) {

2
net/web/src/VirtualList/VirtualList.jsx
View File

@ -108,7 +108,7 @@ export function VirtualList({ id, items, itemRenderer }) {
let view = getPlacement(); let view = getPlacement();
if (view) { if (view) {
if (view.overscan.top < OVERSCAN) { if (view.overscan.top < OVERSCAN) {
if (containers.current[0].index > 0) { if (containers.current[0].index > 0 && containers.current[0].index < items.length) {
let below = containers.current[0]; let below = containers.current[0];
let container = { let container = {
top: below.top - (DEFAULT_ITEM_HEIGHT + 2 * GUTTER), top: below.top - (DEFAULT_ITEM_HEIGHT + 2 * GUTTER),