fix: render less on notifications page

packages/app/src/Element/Event/ShowMore.css

@@ -12,3 +12,7 @@
   font-weight: normal;
   text-decoration: underline;
 }
+
+.show-more-container {
+  min-height: 40px;
+}

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

@@ -1,7 +1,8 @@
 import "./ShowMore.css";
-import { useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
-
+import { useInView } from "react-intersection-observer";
-import messages from "../messages";
+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 (
     <div className="show-more-container">
-      <button className={classNames} onClick={onClick}>
+      <button className={classNames("show-more", className)} onClick={onClick}>
-        {text || defaultText}
+        {text || <FormattedMessage defaultMessage="Show More" />}
       </button>
     </div>
   );
 };
 
 export default ShowMore;
+
+export function ShowMoreInView({ text, onClick, className }: ShowMoreProps) {
+  const { ref, inView } = useInView();
+
+  useEffect(() => {
+    if (inView) {
+      onClick();
+    }
+  }, [inView]);
+
+  return <div className={classNames("show-more-container", className)} ref={ref}>
+    {text}
+  </div>
+}

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
         <NotificationSummary evs={myNotifications as TaggedNostrEvent[]} />
 
         {login.publicKey &&
-          [...timeGrouped.entries()].map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
+          [...timeGrouped.entries()].slice(0, showN).map(([k, g]) => <NotificationGroup key={k} evs={g} onClick={onClick} />)}
+
+        <ShowMoreInView onClick={() => setShowN(s => Math.min(timeGrouped.size, s + 5))} />
       </div>
     </>
   );