From c2783fe6932b5df25c6248b748803ab2d6d5f903 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 10 Jul 2022 10:20:05 -0700
Subject: [PATCH] connecting staggered load action

---
 net/web/src/User/Conversation/Conversation.jsx        |  8 ++++++--
 net/web/src/User/Conversation/useConversation.hook.js |  7 +++++--
 net/web/src/VirtualList/VirtualList.jsx               | 10 +++++++++-
 net/web/src/context/useConversationContext.hook.js    |  5 +++++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/net/web/src/User/Conversation/Conversation.jsx b/net/web/src/User/Conversation/Conversation.jsx
index f5c19b69..48daaee6 100644
--- a/net/web/src/User/Conversation/Conversation.jsx
+++ b/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)}
diff --git a/net/web/src/User/Conversation/useConversation.hook.js b/net/web/src/User/Conversation/useConversation.hook.js
index 8b4a2689..f83d553b 100644
--- a/net/web/src/User/Conversation/useConversation.hook.js
+++ b/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,
diff --git a/net/web/src/VirtualList/VirtualList.jsx b/net/web/src/VirtualList/VirtualList.jsx
index be5b5ece..607d472f 100644
--- a/net/web/src/VirtualList/VirtualList.jsx
+++ b/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);
+        }
       }
     }
   }
diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js
index 7ede1e4e..a37a01f4 100644
--- a/net/web/src/context/useConversationContext.hook.js
+++ b/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();
     },