From 81921578e004178c16b7a6ab686b2e66395b16cf Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 15:20:08 -0500
Subject: [PATCH] TimelineQueueButtonHeader: automatically load new items when
 scrolled to the top of the page

---
 .../timeline_queue_button_header.js           | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/timeline_queue_button_header.js b/app/soapbox/components/timeline_queue_button_header.js
index 25a219336..2dc194312 100644
--- a/app/soapbox/components/timeline_queue_button_header.js
+++ b/app/soapbox/components/timeline_queue_button_header.js
@@ -14,11 +14,15 @@ class TimelineQueueButtonHeader extends React.PureComponent {
     message: PropTypes.object.isRequired,
     threshold: PropTypes.number,
     intl: PropTypes.object.isRequired,
+    autoload: PropTypes.bool,
+    autoloadThreshold: PropTypes.number,
   };
 
   static defaultProps = {
     count: 0,
     threshold: 400,
+    autoload: true,
+    autoloadThreshold: 50,
   };
 
   state = {
@@ -26,9 +30,6 @@ class TimelineQueueButtonHeader extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.window = window;
-    this.documentElement = document.scrollingElement || document.documentElement;
-
     this.attachScrollListener();
   }
 
@@ -36,17 +37,30 @@ class TimelineQueueButtonHeader extends React.PureComponent {
     this.detachScrollListener();
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const { scrollTop } = (document.scrollingElement || document.documentElement);
+    const { count, onClick, autoload, autoloadThreshold } = this.props;
+
+    if (autoload && scrollTop <= autoloadThreshold && count !== prevProps.count) {
+      onClick();
+    }
+  }
+
   attachScrollListener() {
-    this.window.addEventListener('scroll', this.handleScroll);
+    window.addEventListener('scroll', this.handleScroll);
   }
 
   detachScrollListener() {
-    this.window.removeEventListener('scroll', this.handleScroll);
+    window.removeEventListener('scroll', this.handleScroll);
   }
 
   handleScroll = throttle(() => {
     const { scrollTop } = (document.scrollingElement || document.documentElement);
-    const { threshold } = this.props;
+    const { threshold, onClick, autoload, autoloadThreshold } = this.props;
+
+    if (autoload && scrollTop <= autoloadThreshold) {
+      onClick();
+    }
 
     if (scrollTop > threshold) {
       this.setState({ scrolled: true });