adding conversation loading indicator

net/web/src/context/useConversationContext.hook.js

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

net/web/src/session/conversation/Conversation.jsx

@@ -5,7 +5,7 @@ import { Logo } from 'logo/Logo';
 import { AddTopic } from './addTopic/AddTopic';
 import { VirtualList } from './virtualList/VirtualList';
 import { TopicItem } from './topicItem/TopicItem';
-import { Progress } from 'antd';
+import { Progress, Spin } from 'antd';
 
 export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
 
@@ -38,6 +38,16 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
       <div class="thread">
         <VirtualList id={`${cardId}:${channelId}`}
             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 class="divider">
         <div class="line" />

net/web/src/session/conversation/Conversation.styled.js

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

net/web/src/session/conversation/useConversation.hook.js

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

net/web/src/session/conversation/virtualList/VirtualList.jsx

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

net/web/yarn.lock

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