diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 1064a80ee..8b351ee23 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -23,6 +23,7 @@ import usePersistedState from 'effects/use-persisted-state'; import useConnectionStatus from 'effects/use-connection-status'; import Spinner from 'component/spinner'; import LANGUAGES from 'constants/languages'; +import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions'; import YoutubeWelcome from 'web/component/youtubeReferralWelcome'; import { useDegradedPerformance, @@ -477,7 +478,7 @@ function App(props: Props) { useLayoutEffect(() => { if (sidebarOpen && isPersonalized && subscriptions && !resolvedSubscriptions) { setResolvedSubscriptions(true); - resolveUris(subscriptions.map((sub) => sub.uri)); + resolveUris(subscriptions.slice(0, SIDEBAR_SUBS_DISPLAYED).map((sub) => sub.uri)); } }, [sidebarOpen, isPersonalized, resolvedSubscriptions, subscriptions, resolveUris, setResolvedSubscriptions]); diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx index beb6bc86f..0e55cf75f 100644 --- a/ui/component/sideNavigation/view.jsx +++ b/ui/component/sideNavigation/view.jsx @@ -3,6 +3,7 @@ import type { Node } from 'react'; import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import * as KEYCODES from 'constants/keycodes'; +import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions'; import React, { useEffect } from 'react'; import Button from 'component/button'; import ClaimPreviewTitle from 'component/claimPreviewTitle'; @@ -16,7 +17,6 @@ import { useIsMobile, useIsLargeScreen, isTouch } from 'effects/use-screensize'; import { GetLinksData } from 'util/buildHomepage'; import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config'; -const FOLLOWED_ITEM_INITIAL_LIMIT = 10; const touch = isTouch(); type SideNavLink = { @@ -265,23 +265,13 @@ function SideNavigation(props: Props) { const showPushMenu = sidebarOpen && !menuCanCloseCompletely; const showOverlay = isAbsolute && sidebarOpen; - const showSubscriptionSection = shouldRenderLargeMenu && isPersonalized && subscriptions && subscriptions.length > 0; const showTagSection = sidebarOpen && isPersonalized && followedTags && followedTags.length; const [subscriptionFilter, setSubscriptionFilter] = React.useState(''); - const filteredSubscriptions = subscriptions.filter( - (sub) => !subscriptionFilter || sub.channelName.toLowerCase().includes(subscriptionFilter.toLowerCase()) - ); - - let displayedSubscriptions = filteredSubscriptions; - if (showSubscriptionSection && !subscriptionFilter && subscriptions.length > FOLLOWED_ITEM_INITIAL_LIMIT) { - displayedSubscriptions = subscriptions.slice(0, FOLLOWED_ITEM_INITIAL_LIMIT); - } - let displayedFollowedTags = followedTags; - if (showTagSection && followedTags.length > FOLLOWED_ITEM_INITIAL_LIMIT && !expandTags) { - displayedFollowedTags = followedTags.slice(0, FOLLOWED_ITEM_INITIAL_LIMIT); + if (showTagSection && followedTags.length > SIDEBAR_SUBS_DISPLAYED && !expandTags) { + displayedFollowedTags = followedTags.slice(0, SIDEBAR_SUBS_DISPLAYED); } function getLink(props: SideNavLink) { @@ -312,11 +302,20 @@ function SideNavigation(props: Props) { } function getSubscriptionSection() { - if (showSubscriptionSection) { + const showSubsSection = shouldRenderLargeMenu && isPersonalized && subscriptions && subscriptions.length > 0; + if (showSubsSection) { + let displayedSubscriptions; + if (subscriptionFilter) { + const filter = subscriptionFilter.toLowerCase(); + displayedSubscriptions = subscriptions.filter((sub) => sub.channelName.toLowerCase().includes(filter)); + } else { + displayedSubscriptions = subscriptions.slice(0, SIDEBAR_SUBS_DISPLAYED); + } + return ( <>