From d6795a55b19a0d888b5de89d8a1405ad9c0f9b16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 1 May 2022 21:28:31 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Fix=20'Automatically=20load=20more=20items?=
 =?UTF-8?q?=E2=80=A6'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/load_more.tsx       |  2 +-
 app/soapbox/components/scrollable_list.tsx | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/load_more.tsx b/app/soapbox/components/load_more.tsx
index 90f05e5884..90c0f35b0c 100644
--- a/app/soapbox/components/load_more.tsx
+++ b/app/soapbox/components/load_more.tsx
@@ -15,7 +15,7 @@ const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) =>
   }
 
   return (
-    <Button theme='secondary' block disabled={disabled || !visible} onClick={onClick}>
+    <Button theme='primary' block disabled={disabled || !visible} onClick={onClick}>
       <FormattedMessage id='status.load_more' defaultMessage='Load more' />
     </Button>
   );
diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index dc64307b57..dd7b3f9019 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import { Virtuoso, Components } from 'react-virtuoso';
 
+import { getSettings } from 'soapbox/actions/settings';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
+import { useAppSelector } from 'soapbox/hooks';
 
+import LoadMore from './load_more';
 import { Spinner, Text } from './ui';
 
 type Context = {
@@ -60,6 +63,9 @@ const ScrollableList: React.FC<IScrollableList> = ({
   placeholderComponent: Placeholder,
   placeholderCount = 0,
 }) => {
+  const settings = useAppSelector((state) => getSettings(state));
+  const autoloadMore = settings.get('autoloadMore');
+
   /** Normalized children */
   const elements = Array.from(children || []);
 
@@ -72,9 +78,9 @@ const ScrollableList: React.FC<IScrollableList> = ({
 
   // Add a placeholder at the bottom for loading
   // (Don't use Virtuoso's `Footer` component because it doesn't preserve its height)
-  if (hasMore && Placeholder) {
+  if (hasMore && (autoloadMore || isLoading) && Placeholder) {
     data.push(<Placeholder />);
-  } else if (hasMore) {
+  } else if (hasMore && (autoloadMore || isLoading)) {
     data.push(<Spinner />);
   }
 
@@ -105,11 +111,19 @@ const ScrollableList: React.FC<IScrollableList> = ({
   };
 
   const handleEndReached = () => {
-    if (hasMore && onLoadMore) {
+    if (autoloadMore && hasMore && onLoadMore) {
       onLoadMore();
     }
   };
 
+  const loadMore = () => {
+    if (autoloadMore || !hasMore || !onLoadMore) {
+      return null;
+    } else {
+      return <LoadMore visible={!isLoading} onClick={onLoadMore} />;
+    }
+  };
+
   /** Render the actual Virtuoso list */
   const renderFeed = (): JSX.Element => (
     <Virtuoso
@@ -130,6 +144,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
         EmptyPlaceholder: () => renderEmpty(),
         List,
         Item,
+        Footer: loadMore,
       }}
     />
   );

From 5a86de5d139924bc86041d757bf4c6c6a03469b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 1 May 2022 21:36:29 +0200
Subject: [PATCH 2/2] Use useSettings hook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/scrollable_list.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index dd7b3f9019..672520fa52 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Virtuoso, Components } from 'react-virtuoso';
 
-import { getSettings } from 'soapbox/actions/settings';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { useAppSelector } from 'soapbox/hooks';
+import { useSettings } from 'soapbox/hooks';
 
 import LoadMore from './load_more';
 import { Spinner, Text } from './ui';
@@ -63,7 +62,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
   placeholderComponent: Placeholder,
   placeholderCount = 0,
 }) => {
-  const settings = useAppSelector((state) => getSettings(state));
+  const settings = useSettings();
   const autoloadMore = settings.get('autoloadMore');
 
   /** Normalized children */