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

src/components/ui/LazyMount.tsx

@@ -46,8 +46,8 @@ interface Props {
 export default function LazyMount({
   children,
   placeholder,
-  mountMargin = '1600px',
-  unmountMargin = '2400px',
+  mountMargin = '600px',
+  unmountMargin = '1500px',
   className,
 }: Props) {
   const ref = useRef<HTMLDivElement>(null)

src/pages/DiscoverPage.tsx

@@ -96,7 +96,7 @@ export default function DiscoverPage() {
         <FilteredGrid filters={filters} />
       ) : (
         <>
-          <LazyMount><TonightHero kind={kind} /></LazyMount>
+          <TonightHero kind={kind} />
 
           <div className="px-7 mb-2 flex items-center justify-end">
             <Roulette kind={kind} moodId={moodId} />
@@ -115,26 +115,26 @@ export default function DiscoverPage() {
           <div className="relative z-10">
             {kind === 'movie' ? (
               <>
-                <LazyMount><TrendingDayRow /></LazyMount>
-                <LazyMount><PopularMoviesRow /></LazyMount>
-                <LazyMount><UpcomingMoviesRow region={region} /></LazyMount>
-                <LazyMount><TopRatedMoviesRow /></LazyMount>
-                <LazyMount><CultClassicsRow /></LazyMount>
+                <TrendingDayRow />
+                <LazyMount mountMargin="1600px"><PopularMoviesRow /></LazyMount>
+                <LazyMount mountMargin="1600px"><UpcomingMoviesRow region={region} /></LazyMount>
+                <LazyMount mountMargin="1600px"><TopRatedMoviesRow /></LazyMount>
+                <LazyMount mountMargin="1600px"><CultClassicsRow /></LazyMount>
               </>
             ) : (
               <>
-                <LazyMount><TrendingWeekRow /></LazyMount>
-                <LazyMount><PopularTvRow /></LazyMount>
-                <LazyMount><TopRatedTvRow /></LazyMount>
+                <TrendingWeekRow />
+                <LazyMount mountMargin="1600px"><PopularTvRow /></LazyMount>
+                <LazyMount mountMargin="1600px"><TopRatedTvRow /></LazyMount>
               </>
             )}
           </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="flex items-center gap-3 text-text-4">