thread inView rendering

This commit is contained in:
Martti Malmi
2024-01-09 14:07:39 +02:00
parent 3dbbe5b0f0
commit 18beed13c3

View File

@ -73,9 +73,10 @@ const Subthread = ({ active, notes, chains, onNavigate }: SubthreadProps) => {
interface ThreadNoteProps extends Omit<SubthreadProps, "notes"> { interface ThreadNoteProps extends Omit<SubthreadProps, "notes"> {
note: TaggedNostrEvent; note: TaggedNostrEvent;
isLast: boolean; isLast: boolean;
idx: number;
} }
const ThreadNote = ({ active, note, isLast, isLastSubthread, chains, onNavigate }: ThreadNoteProps) => { const ThreadNote = ({ active, note, isLast, isLastSubthread, chains, onNavigate, idx }: ThreadNoteProps) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const replies = getReplies(note.id, chains); const replies = getReplies(note.id, chains);
const activeInReplies = replies.map(r => r.id).includes(active); const activeInReplies = replies.map(r => r.id).includes(active);
@ -97,6 +98,7 @@ const ThreadNote = ({ active, note, isLast, isLastSubthread, chains, onNavigate
key={note.id} key={note.id}
onClick={onNavigate} onClick={onNavigate}
threadChains={chains} threadChains={chains}
waitUntilInView={idx > 5}
/> />
<div className="line-container"></div> <div className="line-container"></div>
</div> </div>
@ -127,6 +129,7 @@ const TierTwo = ({ active, isLastSubthread, notes, chains, onNavigate }: Subthre
chains={chains} chains={chains}
isLastSubthread={isLastSubthread} isLastSubthread={isLastSubthread}
isLast={rest.length === 0} isLast={rest.length === 0}
idx={0}
/> />
{rest.map((r: TaggedNostrEvent, idx: number) => { {rest.map((r: TaggedNostrEvent, idx: number) => {
@ -140,6 +143,7 @@ const TierTwo = ({ active, isLastSubthread, notes, chains, onNavigate }: Subthre
chains={chains} chains={chains}
isLastSubthread={isLastSubthread} isLastSubthread={isLastSubthread}
isLast={lastReply} isLast={lastReply}
idx={idx}
/> />
); );
})} })}
@ -167,6 +171,7 @@ const TierThree = ({ active, isLastSubthread, notes, chains, onNavigate }: Subth
data={first} data={first}
key={first.id} key={first.id}
threadChains={chains} threadChains={chains}
waitUntilInView={true}
/> />
<div className="line-container"></div> <div className="line-container"></div>
</div> </div>
@ -200,6 +205,7 @@ const TierThree = ({ active, isLastSubthread, notes, chains, onNavigate }: Subth
key={r.id} key={r.id}
onClick={onNavigate} onClick={onNavigate}
threadChains={chains} threadChains={chains}
waitUntilInView={idx > 5}
/> />
<div className="line-container"></div> <div className="line-container"></div>
</div> </div>
@ -263,6 +269,7 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
options={rootOptions} options={rootOptions}
onClick={navigateThread} onClick={navigateThread}
threadChains={thread.chains} threadChains={thread.chains}
waitUntilInView={false}
/> />
); );
} else { } else {