From d27a26ec311f1c17bee967aaaba5f6c4096fec4c Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Fri, 11 Dec 2020 12:57:09 +1000
Subject: [PATCH] chat: window-based overscan, bigger pages

---
 pkg/interface/src/views/apps/chat/components/ChatWindow.tsx | 4 ++--
 pkg/interface/src/views/components/VirtualScroller.tsx      | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
index c60637064..c1114fae1 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatWindow.tsx
@@ -199,14 +199,14 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
     const currSize = graph.size;
     if(newer && !this.loadedNewest) {
       const [index] = graph.peekLargest()!;
-      await api.graph.getYoungerSiblings(ship,name, 5, `/${index.toString()}`)
+      await api.graph.getYoungerSiblings(ship,name, 100, `/${index.toString()}`)
       if(currSize === graph.size) {
         console.log('loaded all newest');
         this.loadedNewest = true;
       }
     } else if(!newer && !this.loadedOldest) {
       const [index] = graph.peekSmallest()!;
-      await api.graph.getOlderSiblings(ship,name, 5, `/${index.toString()}`)
+      await api.graph.getOlderSiblings(ship,name, 100, `/${index.toString()}`)
       this.calculateUnreadIndex();
       if(currSize === graph.size) {
         console.log('loaded all oldest');
diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index 48ff8d12c..fc06e62d9 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -143,13 +143,15 @@ export default class VirtualScroller extends Component<VirtualScrollerProps, Vir
     const { data, size: totalSize, onCalculateVisibleItems } = this.props;
     console.log(windowHeight);
 
+    const overscan = Math.max(windowHeight / 2, 200);
+
 
     [...data].forEach(([index, datum]) => {
       const height = this.heightOf(index);
-      if (startgap < (scrollTop - height) && !startGapFilled) {
+      if (startgap < (scrollTop - overscan) && !startGapFilled) {
         startBuffer.set(index, datum);
         startgap += height;
-      } else if (heightShown < (windowHeight + height)) {
+      } else if (heightShown < (windowHeight + overscan)) {
         startGapFilled = true;
         visibleItems.set(index, datum);
         heightShown += height;