Skip to content

Commit 9899823

Browse files
[Web] Bump desktop trending/feed loadMorePageSize to 10
The shared default (`TRENDING_LOAD_MORE_PAGE_SIZE` / `FEED_LOAD_MORE_PAGE_SIZE = 4`) is tuned for mobile viewports and slower touch scrolling. On desktop a fast trackpad / wheel scroll covers ~2 viewports per second, but each 4-track page only adds ~480px of real content — so successive load-mores can't keep up and the lineup visibly lags behind the user even with the synchronous skeleton tail. Override at the desktop call sites only, leaving the shared constant (and mobile's behavior) untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 4e96832 commit 9899823

2 files changed

Lines changed: 14 additions & 6 deletions

File tree

packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useMemo, useRef } from 'react'
33
import {
44
getFeedQueryKey,
55
FEED_INITIAL_PAGE_SIZE,
6-
FEED_LOAD_MORE_PAGE_SIZE,
76
useCurrentUserId,
87
useFeed
98
} from '@audius/common/api'
@@ -57,12 +56,17 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
5756
const feedFilter = useSelector(getFeedFilter)
5857
const { data: currentUserId } = useCurrentUserId()
5958

59+
// Desktop viewports + fast trackpad / wheel scroll need bigger pages than
60+
// the shared default (mobile-tuned) so successive load-mores keep up with a
61+
// user scrolling deep into the lineup.
62+
const desktopLoadMorePageSize = 10
63+
6064
const feedArgs = useMemo(
6165
() => ({
6266
userId: currentUserId,
6367
filter: feedFilter,
6468
initialPageSize: FEED_INITIAL_PAGE_SIZE,
65-
loadMorePageSize: FEED_LOAD_MORE_PAGE_SIZE
69+
loadMorePageSize: desktopLoadMorePageSize
6670
}),
6771
[feedFilter, currentUserId]
6872
)
@@ -134,7 +138,7 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
134138
isError={isError}
135139
hasNextPage={hasNextPage}
136140
loadNextPage={loadNextPage}
137-
pageSize={FEED_LOAD_MORE_PAGE_SIZE}
141+
pageSize={desktopLoadMorePageSize}
138142
initialPageSize={FEED_INITIAL_PAGE_SIZE}
139143
variant={LineupVariant.MAIN}
140144
scrollParent={containerRef?.current ?? null}

packages/web/src/pages/trending-page/components/desktop/TrendingPageContent.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
getTrendingQueryKey,
55
getTrendingUndergroundQueryKey,
66
TRENDING_INITIAL_PAGE_SIZE,
7-
TRENDING_LOAD_MORE_PAGE_SIZE,
87
useTrending,
98
useTrendingUnderground
109
} from '@audius/common/api'
@@ -106,11 +105,16 @@ const TrendingPageContent = ({ containerRef }: TrendingPageContentProps) => {
106105
const trendingGenre = useSelector(getTrendingGenre)
107106
const trendingTimeRange = useSelector(getTrendingTimeRange)
108107

108+
// Desktop viewports + fast trackpad / wheel scroll need bigger pages than
109+
// the shared default (mobile-tuned) so successive load-mores keep up with a
110+
// user scrolling deep into the lineup.
111+
const desktopLoadMorePageSize = 10
112+
109113
// ----- Three tanquery streams, one per time range -----
110114
const trendingArgs = useMemo(
111115
() => ({
112116
initialPageSize: TRENDING_INITIAL_PAGE_SIZE,
113-
loadMorePageSize: TRENDING_LOAD_MORE_PAGE_SIZE,
117+
loadMorePageSize: desktopLoadMorePageSize,
114118
genre: trendingGenre
115119
}),
116120
[trendingGenre]
@@ -401,7 +405,7 @@ const TrendingPageContent = ({ containerRef }: TrendingPageContentProps) => {
401405
isError={q.isError}
402406
hasNextPage={q.hasNextPage}
403407
loadNextPage={q.loadNextPage}
404-
pageSize={TRENDING_LOAD_MORE_PAGE_SIZE}
408+
pageSize={desktopLoadMorePageSize}
405409
initialPageSize={TRENDING_INITIAL_PAGE_SIZE}
406410
scrollParent={containerRef?.current ?? null}
407411
endOfLineupElement={

0 commit comments

Comments
 (0)