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 = ({ onClick, disabled, visible = true }) => } return ( - ); 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 = ({ 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 = ({ // 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(); - } else if (hasMore) { + } else if (hasMore && (autoloadMore || isLoading)) { data.push(); } @@ -105,11 +111,19 @@ const ScrollableList: React.FC = ({ }; const handleEndReached = () => { - if (hasMore && onLoadMore) { + if (autoloadMore && hasMore && onLoadMore) { onLoadMore(); } }; + const loadMore = () => { + if (autoloadMore || !hasMore || !onLoadMore) { + return null; + } else { + return ; + } + }; + /** Render the actual Virtuoso list */ const renderFeed = (): JSX.Element => ( = ({ EmptyPlaceholder: () => renderEmpty(), List, Item, + Footer: loadMore, }} /> );