From 8d0a242f3bf4fece51fb64a9a58307e6dbccdf60 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 26 Apr 2022 14:22:50 -0700
Subject: [PATCH] display spinner when loading topics

---
 net/web/src/User/Conversation/Conversation.jsx        | 5 +++--
 net/web/src/User/Conversation/Conversation.styled.jsx | 7 ++++++-
 net/web/src/User/Conversation/useConversation.hook.js | 6 ++++--
 net/web/src/VirtualList/VirtualList.jsx               | 2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
index 659517f2..379ab989 100644
--- a/net/web/src/User/Conversation/Conversation.jsx
+++ b/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>
diff --git a/net/web/src/User/Conversation/Conversation.styled.jsx b/net/web/src/User/Conversation/Conversation.styled.jsx
index 41875220..752653a9 100644
--- a/net/web/src/User/Conversation/Conversation.styled.jsx
+++ b/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);
+`;
diff --git a/net/web/src/User/Conversation/useConversation.hook.js b/net/web/src/User/Conversation/useConversation.hook.js
index d6caa8d7..b913993a 100644
--- a/net/web/src/User/Conversation/useConversation.hook.js
+++ b/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) {
diff --git a/net/web/src/VirtualList/VirtualList.jsx b/net/web/src/VirtualList/VirtualList.jsx
index 3c6a1d35..f50552d0 100644
--- a/net/web/src/VirtualList/VirtualList.jsx
+++ b/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),