diff --git a/src/element/LazyImage.tsx b/src/element/LazyImage.tsx
deleted file mode 100644
index 5e7590b6..00000000
--- a/src/element/LazyImage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-
-export default function LazyImage(props: any) {
- const { ref, inView, entry } = useInView();
- const [shown, setShown] = useState(false);
-
- useEffect(() => {
- setShown(s => {
- if (!s && inView) {
- return true;
- }
- return s;
- })
- }, [inView]);
-
- return shown ?
:
-}
diff --git a/src/element/Note.css b/src/element/Note.css
index 3fc9fc68..d6156dc2 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -1,6 +1,7 @@
.note {
margin-bottom: 10px;
border-bottom: 1px solid var(--gray);
+ min-height: 140px;
}
.note.thread {
diff --git a/src/element/Note.tsx b/src/element/Note.tsx
index bba59ee5..464537a6 100644
--- a/src/element/Note.tsx
+++ b/src/element/Note.tsx
@@ -1,5 +1,5 @@
import "./Note.css";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { default as NEvent } from "../nostr/Event";
@@ -11,6 +11,7 @@ import NoteTime from "./NoteTime";
import EventKind from "../nostr/EventKind";
import useProfile from "../feed/ProfileFeed";
import { TaggedRawEvent, u256 } from "../nostr";
+import { useInView } from "react-intersection-observer";
export interface NoteProps {
data?: TaggedRawEvent,
@@ -32,6 +33,8 @@ export default function Note(props: NoteProps) {
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
const users = useProfile(pubKeys);
const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
+ const { ref, inView } = useInView();
+ const [visible, setVisible] = useState(false);
const options = {
showHeader: true,
@@ -46,7 +49,13 @@ export default function Note(props: NoteProps) {
return (Deleted);
}
return ;
- }, [props]);
+ }, [ev]);
+
+ useEffect(() => {
+ if (inView && !visible) {
+ setVisible(true);
+ }
+ }, [inView]);
function goToEvent(e: any, id: u256) {
if (!window.location.pathname.startsWith("/e/")) {
@@ -92,20 +101,29 @@ export default function Note(props: NoteProps) {
);
}
+ function content() {
+ if (!visible) return null;
+ return (
+ <>
+ {options.showHeader ?
+
+
+ {options.showTime ?
+
+
+
: null}
+
: null}
+ goToEvent(e, ev.Id)}>
+ {transformBody()}
+
+ {options.showFooter ? : null}
+ >
+ )
+ }
+
return (
-
- {options.showHeader ?
-
-
- {options.showTime ?
-
-
-
: null}
-
: null}
-
goToEvent(e, ev.Id)}>
- {transformBody()}
-
- {options.showFooter ?
: null}
+
+ {content()}
)
}
diff --git a/src/element/Text.tsx b/src/element/Text.tsx
index c9b505a0..add90348 100644
--- a/src/element/Text.tsx
+++ b/src/element/Text.tsx
@@ -5,7 +5,6 @@ import { TwitterTweetEmbed } from "react-twitter-embed";
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "../Const";
import { eventLink, hexToBech32 } from "../Util";
import Invoice from "./Invoice";
-import LazyImage from "./LazyImage";
import Hashtag from "./Hashtag";
import './Text.css'
@@ -28,7 +27,7 @@ function transformHttpLink(a: string) {
case "png":
case "bmp":
case "webp": {
- return
;
+ return
![]({url.toString()})
;
}
case "mp4":
case "mov":