From a9b961ad03f69ed7e5b804c13a5a58e66e3f0d09 Mon Sep 17 00:00:00 2001
From: lashman <lashman@robotbrush.com>
Date: Mon, 13 Apr 2026 19:53:03 +0300
Subject: [PATCH] eager-mount discover hero and first row, preload deeper rows
 with 1600px margin

---
 src/components/ui/LazyMount.tsx |  4 ++--
 src/pages/DiscoverPage.tsx      | 24 ++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/LazyMount.tsx b/src/components/ui/LazyMount.tsx
index 2dddb2c..1fa3fe0 100644
--- a/src/components/ui/LazyMount.tsx
+++ b/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)
diff --git a/src/pages/DiscoverPage.tsx b/src/pages/DiscoverPage.tsx
index 1ba50bb..91e26c9 100644
--- a/src/pages/DiscoverPage.tsx
+++ b/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">