diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx index 63ada3766..aa6441b8b 100644 --- a/app/soapbox/components/status_list.tsx +++ b/app/soapbox/components/status_list.tsx @@ -10,7 +10,7 @@ import Ad from 'soapbox/features/ads/components/ad'; import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions'; import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status'; import PendingStatus from 'soapbox/features/ui/components/pending_status'; -import { useSoapboxConfig } from 'soapbox/hooks'; +import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks'; import useAds from 'soapbox/queries/ads'; import type { OrderedSet as ImmutableOrderedSet } from 'immutable'; @@ -63,6 +63,9 @@ const StatusList: React.FC = ({ const adsInterval = Number(soapboxConfig.extensions.getIn(['ads', 'interval'], 40)) || 0; const node = useRef(null); + const suggestedProfiles = useAppSelector((state) => state.suggestions.items); + const areSuggestedProfilesLoaded = useAppSelector((state) => state.suggestions.isLoading); + const getFeaturedStatusCount = () => { return featuredStatusIds?.size || 0; }; @@ -167,9 +170,10 @@ const StatusList: React.FC = ({ )); }; - const renderFeedSuggestions = (): React.ReactNode => { + const renderFeedSuggestions = useCallback((): React.ReactNode => { + if (!areSuggestedProfilesLoaded && suggestedProfiles.size === 0) return null; return ; - }; + }, [areSuggestedProfilesLoaded, suggestedProfiles.size]); const renderStatuses = (): React.ReactNode[] => { if (isLoading || statusIds.size > 0) { @@ -181,7 +185,8 @@ const StatusList: React.FC = ({ if (statusId === null) { acc.push(renderLoadGap(index)); } else if (statusId.startsWith('末suggestions-')) { - acc.push(renderFeedSuggestions()); + const suggestions = renderFeedSuggestions(); + if (suggestions) acc.push(suggestions); } else if (statusId.startsWith('末pending-')) { acc.push(renderPendingStatus(statusId)); } else { @@ -233,12 +238,9 @@ const StatusList: React.FC = ({ placeholderComponent={PlaceholderStatus} placeholderCount={20} ref={node} - className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', { + className={classNames('flex flex-col gap-3 divide-y divide-solid divide-gray-200 dark:divide-slate-700', { 'divide-none': divideType !== 'border', })} - itemClassName={classNames({ - 'pb-3': divideType !== 'border', - })} {...other} > {renderScrollableContent()}