diff --git a/packages/app/src/Element/Event/ShowMore.css b/packages/app/src/Element/Event/ShowMore.css
index fcfc4b34..7dbbcbbc 100644
--- a/packages/app/src/Element/Event/ShowMore.css
+++ b/packages/app/src/Element/Event/ShowMore.css
@@ -12,3 +12,7 @@
font-weight: normal;
text-decoration: underline;
}
+
+.show-more-container {
+ min-height: 40px;
+}
diff --git a/packages/app/src/Element/Event/ShowMore.tsx b/packages/app/src/Element/Event/ShowMore.tsx
index ce120626..a8051cfe 100644
--- a/packages/app/src/Element/Event/ShowMore.tsx
+++ b/packages/app/src/Element/Event/ShowMore.tsx
@@ -1,7 +1,8 @@
import "./ShowMore.css";
-import { useIntl } from "react-intl";
-
-import messages from "../messages";
+import { FormattedMessage } from "react-intl";
+import { useInView } from "react-intersection-observer";
+import { useEffect } from "react";
+import classNames from "classnames";
interface ShowMoreProps {
text?: string;
@@ -10,16 +11,27 @@ interface ShowMoreProps {
}
const ShowMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
- const { formatMessage } = useIntl();
- const defaultText = formatMessage(messages.ShowMore);
- const classNames = className ? `show-more ${className}` : "show-more";
return (
-
);
};
export default ShowMore;
+
+export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
+ const { ref, inView } = useInView();
+
+ useEffect(() => {
+ if (inView) {
+ onClick();
+ }
+ }, [inView]);
+
+ return
+ {text}
+
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/Notifications.tsx b/packages/app/src/Pages/Notifications.tsx
index 2f512aa1..ce6577ac 100644
--- a/packages/app/src/Pages/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications.tsx
@@ -24,6 +24,7 @@ import { Day } from "Const";
import Tabs, { Tab } from "Element/Tabs";
import classNames from "classnames";
import { AsyncIcon } from "Element/AsyncIcon";
+import { ShowMoreInView } from "Element/Event/ShowMore";
function notificationContext(ev: TaggedNostrEvent) {
switch (ev.kind) {
@@ -66,6 +67,7 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
const login = useLogin();
const { isMuted } = useModeration();
const groupInterval = 3600 * 3;
+ const [showN, setShowN] = useState(10);
useEffect(() => {
markNotificationsRead(login);
@@ -111,7 +113,9 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
{login.publicKey &&
- [...timeGrouped.entries()].map(([k, g]) => )}
+ [...timeGrouped.entries()].slice(0, showN).map(([k, g]) => )}
+
+ setShowN(s => Math.min(timeGrouped.size, s + 5))} />
>
);