From 04ce9941578ed8d9134cf484fbf543a81c38348b Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 17 Sep 2020 20:00:45 -0700
Subject: [PATCH] chat: make backlog height only reflect loaded messages

fixes #3496
---
 .../views/apps/chat/components/lib/ChatWindow.tsx  |  6 +++++-
 .../src/views/components/VirtualScroller.tsx       | 14 +++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
index 4724a94bf..f166ede6a 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
@@ -20,6 +20,7 @@ import { BacklogElement } from "./backlog-element";
 const INITIAL_LOAD = 20;
 const DEFAULT_BACKLOG_SIZE = 100;
 const IDLE_THRESHOLD = 64;
+const MAX_BACKLOG_SIZE = 1000;
 
 type ChatWindowProps = RouteComponentProps<{
   ship: Patp;
@@ -188,8 +189,11 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
 
     this.setState({ fetchPending: true });
     
+    start = Math.min(mailboxSize - start, mailboxSize);
+    end = Math.max(mailboxSize - end, 0, start - MAX_BACKLOG_SIZE);
+    
     return api.chat
-      .fetchMessages(Math.max(mailboxSize - end, 0), Math.min(mailboxSize - start, mailboxSize), station)
+      .fetchMessages(end, start, station)
       .finally(() => {
         this.setState({ fetchPending: false });
       });
diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index c253a8b81..08da02ff5 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -149,13 +149,13 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
       }
     });
 
-    endgap += Math.abs(totalSize - data.size) * averageHeight;
+    // endgap += Math.abs(totalSize - data.size) * averageHeight; // Uncomment to make full height of backlog
     startBuffer = new Map([...startBuffer].reverse().slice(0, visibleItems.size));
-    
+
     startBuffer.forEach((datum, index) => {
       startgap -= this.heightOf(index);
     });
-    
+
     visibleItems = new Map([...visibleItems].reverse());
     endBuffer = new Map([...endBuffer].reverse());
     const firstVisibleKey = Array.from(visibleItems.keys())[0] ?? this.estimateIndexFromScrollTop(scrollTop);
@@ -214,7 +214,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
   componentWillUnmount() {
     window.removeEventListener('keydown', this.invertedKeyHandler, true);
   }
-  
+
   setWindow(element) {
     if (this.window) return;
     this.window = element;
@@ -256,7 +256,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
     if (scrollTop !== scrollHeight) {
       this.setState({ scrollTop });
     }
-    
+
     this.calculateVisibleItems();
     onScroll ? onScroll({ scrollTop, scrollHeight, windowHeight }) : null;
     if (scrollTop === 0) {
@@ -272,7 +272,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
       endgap,
       visibleItems
     } = this.state;
-    
+
     const {
       origin = 'top',
       loadRows,
@@ -280,7 +280,7 @@ export default class VirtualScroller extends PureComponent<VirtualScrollerProps,
       style,
       data
     } = this.props;
-    
+
     const indexesToRender = Array.from(visibleItems.keys());
 
     const transform = origin === 'top' ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';