lashman/jellybloom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

eager-mount discover hero and first row, preload deeper rows with 1600px margin

Browse Source
This commit is contained in:
lashman
2026-04-13 19:53:03 +03:00
parent 511bdd48cf
commit a9b961ad03
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/LazyMount.tsx
+2 -2
View File
@@ -46,8 +46,8 @@ interface Props {
export default function LazyMount({ export default function LazyMount({
children, children,
placeholder, placeholder,
mountMargin = '1600px', mountMargin = '600px',
unmountMargin = '2400px', unmountMargin = '1500px',
className, className,
}: Props) { }: Props) {
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
src/pages/DiscoverPage.tsx
+12 -12
View File
@@ -96,7 +96,7 @@ export default function DiscoverPage() {
<FilteredGrid filters={filters} /> <FilteredGrid filters={filters} />
) : ( ) : (
<> <>
<LazyMount><TonightHero kind={kind} /></LazyMount> <TonightHero kind={kind} />
<div className="px-7 mb-2 flex items-center justify-end"> <div className="px-7 mb-2 flex items-center justify-end">
<Roulette kind={kind} moodId={moodId} /> <Roulette kind={kind} moodId={moodId} />
@@ -115,26 +115,26 @@ export default function DiscoverPage() {
<div className="relative z-10"> <div className="relative z-10">
{kind === 'movie' ? ( {kind === 'movie' ? (
<> <>
<LazyMount><TrendingDayRow /></LazyMount> <TrendingDayRow />
<LazyMount><PopularMoviesRow /></LazyMount> <LazyMount mountMargin="1600px"><PopularMoviesRow /></LazyMount>
<LazyMount><UpcomingMoviesRow region={region} /></LazyMount> <LazyMount mountMargin="1600px"><UpcomingMoviesRow region={region} /></LazyMount>
<LazyMount><TopRatedMoviesRow /></LazyMount> <LazyMount mountMargin="1600px"><TopRatedMoviesRow /></LazyMount>
<LazyMount><CultClassicsRow /></LazyMount> <LazyMount mountMargin="1600px"><CultClassicsRow /></LazyMount>
</> </>
) : ( ) : (
<> <>
<LazyMount><TrendingWeekRow /></LazyMount> <TrendingWeekRow />
<LazyMount><PopularTvRow /></LazyMount> <LazyMount mountMargin="1600px"><PopularTvRow /></LazyMount>
<LazyMount><TopRatedTvRow /></LazyMount> <LazyMount mountMargin="1600px"><TopRatedTvRow /></LazyMount>
</> </>
)} )}
</div> </div>
{kind === 'movie' && <LazyMount><OnThisDay /></LazyMount>} {kind === 'movie' && <LazyMount mountMargin="1600px"><OnThisDay /></LazyMount>}
{kind === 'movie' && <LazyMount><LibraryGapFinder /></LazyMount>} {kind === 'movie' && <LazyMount mountMargin="1600px"><LibraryGapFinder /></LazyMount>}
{kind === 'movie' && <LazyMount><CanonicalLists /></LazyMount>} {kind === 'movie' && <LazyMount mountMargin="1600px"><CanonicalLists /></LazyMount>}
<div className="mt-4 mb-2 px-7"> <div className="mt-4 mb-2 px-7">
<div className="flex items-center gap-3 text-text-4"> <div className="flex items-center gap-3 text-text-4">