From a7792c117d1519f30e45546ec6a69c515b8aaf09 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 19:04:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B5=84=E6=96=99=E6=B5=81=E6=8F=90?=
 =?UTF-8?q?=E6=97=A9=E6=98=BE=E7=8E=B0=E5=86=85=E5=AE=B9,=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=E7=A9=BA=E7=99=BD=E7=BC=BA=E5=8F=A3=E8=A2=AB=E8=AF=AF?=
 =?UTF-8?q?=E8=AE=A4=E4=B8=BA=E5=88=B0=E5=BA=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reveal 加 300px 前置 viewport margin,内容在进入视口前淡入;
无限滚动预加载触发线 200px → 1000px,下一页提前请求。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/messageStream/MessageStream.tsx |  4 +++-
 src/motion/Reveal.tsx                          | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/messageStream/MessageStream.tsx b/src/components/messageStream/MessageStream.tsx
index 42091bc..e8f60b9 100644
--- a/src/components/messageStream/MessageStream.tsx
+++ b/src/components/messageStream/MessageStream.tsx
@@ -62,7 +62,9 @@ export function MessageStream({ scope }: MessageStreamProps) {
           }
         }
       },
-      { rootMargin: "200px" },
+      // Prefetch the next page well before the sentinel is visible so content
+      // is already in place as the user scrolls — no blank gap at the bottom.
+      { rootMargin: "1000px" },
     );
     io.observe(el);
     return () => io.disconnect();
diff --git a/src/motion/Reveal.tsx b/src/motion/Reveal.tsx
index 8c367c0..f527361 100644
--- a/src/motion/Reveal.tsx
+++ b/src/motion/Reveal.tsx
@@ -11,6 +11,13 @@ type RevealProps = {
   once?: boolean;
   /** Fraction of the element that must be visible to trigger (0-1). */
   amount?: number;
+  /**
+   * Root margin for the in-view trigger (same semantics as IntersectionObserver
+   * `rootMargin`). The default positive bottom value reveals each block ~300px
+   * *before* it scrolls into view, so long feeds never show a blank gap that
+   * reads as "the bottom" before content fades in.
+   */
+  margin?: string;
 };
 
 /**
@@ -24,6 +31,7 @@ export function Reveal({
   className,
   once = true,
   amount = 0.15,
+  margin = "0px 0px 300px 0px",
 }: RevealProps) {
   return (
     <m.div
@@ -32,7 +40,7 @@ export function Reveal({
       custom={delay}
       initial="hidden"
       whileInView="visible"
-      viewport={{ once, amount }}
+      viewport={{ once, amount, margin }}
     >
       {children}
     </m.div>