NoteInner prop waitUntilInView = false

packages/app/src/Element/Event/Note.tsx

@@ -41,6 +41,7 @@ export interface NoteProps {
     longFormPreview?: boolean;
     truncate?: boolean;
   };
+  waitUntilInView?: boolean;
 }
 
 export default function Note(props: NoteProps) {

packages/app/src/Element/Event/NoteInner.tsx

@@ -31,7 +31,7 @@ import DisplayName from "@/Element/User/DisplayName";
 const TEXT_TRUNCATE_LENGTH = 400;
 
 export function NoteInner(props: NoteProps) {
-  const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
+  const { data: ev, related, highlight, options: opt, ignoreModeration = false, className , waitUntilInView } = props;
 
   const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className);
   const navigate = useNavigate();
@@ -326,7 +326,7 @@ export function NoteInner(props: NoteProps) {
   }
 
   function content() {
-    if (!inView) return undefined;
+    if (waitUntilInView && !inView) return undefined;
     return (
       <>
         {options.showHeader && (

packages/app/src/Element/Feed/TimelineFragment.tsx

@@ -13,6 +13,7 @@ export interface TimelineFragment {
 export interface TimelineFragProps {
   frag: TimelineFragment;
   related: Array<TaggedNostrEvent>;
+  index: number;
   noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
   noteOnClick?: (ev: TaggedNostrEvent) => void;
   noteContext?: (ev: TaggedNostrEvent) => ReactNode;
@@ -41,6 +42,7 @@ export function TimelineFragment(props: TimelineFragProps) {
               options={{
                 truncate: true,
               }}
+              waitUntilInView={props.index > 10}
             />
           ),
       )}

packages/app/src/Element/Feed/TimelineRenderer.tsx

@@ -99,6 +99,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
           noteRenderer={props.noteRenderer}
           noteOnClick={props.noteOnClick}
           noteContext={props.noteContext}
+          index={index}
         />
       </ErrorBoundary>
     ));