Merge branch 'autoload-switch' into 'develop'

Make 'Automatically load more items…' work

See merge request soapbox-pub/soapbox-fe!1288

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>
   );

app/soapbox/components/scrollable_list.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { Virtuoso, Components } from 'react-virtuoso';
 
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
+import { useSettings } from 'soapbox/hooks';
 
+import LoadMore from './load_more';
 import { Spinner, Text } from './ui';
 
 type Context = {
@@ -60,6 +62,9 @@ const ScrollableList: React.FC<IScrollableList> = ({
   placeholderComponent: Placeholder,
   placeholderCount = 0,
 }) => {
+  const settings = useSettings();
+  const autoloadMore = settings.get('autoloadMore');
+
   /** Normalized children */
   const elements = Array.from(children || []);
 
@@ -72,9 +77,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 +110,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 +143,7 @@ const ScrollableList: React.FC<IScrollableList> = ({
         EmptyPlaceholder: () => renderEmpty(),
         List,
         Item,
+        Footer: loadMore,
       }}
     />
   );