display spinner when loading topics

net/web/src/User/Conversation/Conversation.jsx

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

net/web/src/User/Conversation/Conversation.styled.jsx

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

net/web/src/User/Conversation/useConversation.hook.js

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

net/web/src/VirtualList/VirtualList.jsx

@@ -108,7 +108,7 @@ export function VirtualList({ id, items, itemRenderer }) {
     let view = getPlacement();
     if (view) {
       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 container = {
             top: below.top - (DEFAULT_ITEM_HEIGHT + 2 * GUTTER),