connecting staggered load action

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

@@ -27,6 +27,10 @@ export function Conversation() {
     }
   }, [state]);
 
+  const onMoreTopics = () => {
+    actions.more();
+  }
+
   const topicRenderer = (topic) => {
     return (<TopicItem host={state.cardId == null} topic={topic} />)
   }
@@ -90,8 +94,8 @@ export function Conversation() {
       </div>
       <div class="thread">
         <VirtualList id={state.channelId + state.cardId} 
-            items={state.topics} itemRenderer={topicRenderer} />
-        <BusySpin size="large" delay="1000" spinning={!state.init} />
+            items={state.topics} itemRenderer={topicRenderer} onMore={onMoreTopics} />
+        <BusySpin size="large" delay="1000" spinning={state.loading} />
       </div>
       <AddTopic />
       <Modal title="Conversation Members" visible={showMembers} centered onCancel={() => setShowMembers(false)}

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

@@ -7,7 +7,7 @@ import { ChannelContext } from 'context/ChannelContext';
 export function useConversation() {
   
   const [state, setState] = useState({
-    init: true,
+    loading: true,
     cardId: null,
     channelId: null,
     subject: null,
@@ -33,6 +33,9 @@ export function useConversation() {
     remove: async () => {
       await conversation.actions.removeConversation();
       navigate('/user');
+    },
+    more: () => {
+      conversation.actions.addHistory();
     }
   };
 
@@ -51,7 +54,7 @@ export function useConversation() {
       return 0;
     });
     updateState({
-      init: conversation.state.init,
+      loading: conversation.state.loading,
       subject: conversation.state.subject,
       contacts: conversation.state.contacts,
       cardId: conversation.state.cardId,

net/web/src/VirtualList/VirtualList.jsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { VirtualListWrapper, VirtualItem } from './VirtualList.styled';
 import ReactResizeDetector from 'react-resize-detector';
 
-export function VirtualList({ id, items, itemRenderer }) {
+export function VirtualList({ id, items, itemRenderer, onMore }) {
 
   const REDZONE = 1024; // recenter on canvas if in canvas edge redzone
   const HOLDZONE = 2048; // drop slots outside of holdzone of view
@@ -23,6 +23,7 @@ export function VirtualList({ id, items, itemRenderer }) {
   let listRef = useRef();
   let key = useRef(null);
   let itemView = useRef([]);
+  let nomore = useRef(false);
 
   const addSlot = (id, slot) => {
     setSlots((m) => { m.set(id, slot); return new Map(m); })
@@ -110,6 +111,13 @@ export function VirtualList({ id, items, itemRenderer }) {
       if (view?.overscan?.top <= 0) {
         scrollTop.current = containers.current[0].top;
         listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
+        if (!nomore.current) {
+          nomore.current = true;
+          onMore();
+          setTimeout(() => {
+            nomore.current = false;
+          }, 2500);
+        }
       }
     }
   }

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

@@ -8,6 +8,7 @@ export function useConversationContext() {
 
   const [state, setState] = useState({
     init: false,
+    loading: false,
     cardId: null,
     channelId: null,
     subject: null,
@@ -210,6 +211,7 @@ export function useConversationContext() {
         await setTopics(events.current[0]);
         events.current.shift();
       }
+      updateState({ loading: false });
 
       serialize.current--;
     }
@@ -223,12 +225,15 @@ export function useConversationContext() {
   const actions = {
     setConversationId: (cardId, channelId) => {
       view.current += 1;
+      updateState({ loading: true });
       events.current = [{ type: EVENT_OPEN, data: { cardId, channelId }}];
       updateState({ init: false, subject: null, cardId, channelId, topics: new Map() });
+      topics.current = new Map();
       updateConversation();
 
     },
     addHistory: () => {
+      updateState({ loading: true });
       events.current.push({ type: EVENT_MORE });
       updateConversation();
     },