diff --git a/client/src/components/routes/HashtagPage.tsx b/client/src/components/routes/HashtagPage.tsx
index 50e8121..99abdf1 100644
--- a/client/src/components/routes/HashtagPage.tsx
+++ b/client/src/components/routes/HashtagPage.tsx
@@ -3,6 +3,7 @@ import NewNoteCard from "../forms/PostFormCard";
import { useParams } from "react-router-dom";
import useProcessedEvents from "../../hooks/processedEvents";
import HashtagBar from "../modals/HashtagBar";
+import { useState, useEffect } from "react";
const DEFAULT_DIFFICULTY = 0;
@@ -10,6 +11,23 @@ const HashtagPage = () => {
const { id } = useParams();
const filterDifficulty = DEFAULT_DIFFICULTY;
const { processedEvents } = useProcessedEvents(id as string, filterDifficulty);
+ const [visibleEvents, setVisibleEvents] = useState(10);
+ const [isAnimating, setIsAnimating] = useState(true);
+
+ const handleScroll = () => {
+ if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+ setVisibleEvents((prev) => prev + 10);
+ }
+ };
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setIsAnimating(false);
+ }, 4000);
+
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
// Render the component
return (
@@ -18,15 +36,14 @@ const HashtagPage = () => {
-
- {processedEvents.map((event) =>
+
+ {processedEvents.slice(0, visibleEvents).map((event) =>
-
)}
diff --git a/client/src/components/routes/Home.tsx b/client/src/components/routes/Home.tsx
index 5dea3b9..468fe02 100644
--- a/client/src/components/routes/Home.tsx
+++ b/client/src/components/routes/Home.tsx
@@ -12,13 +12,24 @@ const Home = () => {
const { processedEvents } = useProcessedEvents(undefined, filterDifficulty);
const [isAnimating, setIsAnimating] = useState(true);
+ const [visibleEvents, setVisibleEvents] = useState(10);
+
+ const handleScroll = () => {
+ if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+ setVisibleEvents((prev) => prev + 10);
+ }
+ };
useEffect(() => {
const timer = setTimeout(() => {
setIsAnimating(false);
}, 4000);
- return () => clearTimeout(timer);
+ window.addEventListener("scroll", handleScroll);
+ return () => {
+ clearTimeout(timer);
+ window.removeEventListener("scroll", handleScroll);
+ };
}, []);
// Render the component
@@ -29,7 +40,7 @@ const Home = () => {
- {processedEvents.map((event) => (
+ {processedEvents.slice(0, visibleEvents).map((event) => (
{
const { id } = useParams();
const [prevMentions, setPrevMentions] = useState([]);
+ const [visibleReplyEvents, setVisibleReplyEvents] = useState(10);
let decodeResult = nip19.decode(id as string);
let hexID = decodeResult.data as string;
const { noteEvents, metadataEvents } = useFetchEvents(undefined,false,hexID);
@@ -39,6 +40,17 @@ const Thread = () => {
}
}, [OPEvent]);
+ useEffect(() => {
+ const handleScroll = () => {
+ if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+ setVisibleReplyEvents((prev) => prev + 10);
+ }
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
if (OPEvent) {
const uniqEvents = uniqBy(prevMentions, "id");
const earlierEvents = uniqEvents
@@ -68,7 +80,7 @@ const Thread = () => {
{/* This is the white line separator */}
- {replyEvents.map((event: Event) => (
+ {replyEvents.slice(0, visibleReplyEvents).map((event: Event) => (
tag[0] === 'e' && tag[1] !== OPEvent.id) ? 'ml-auto' : 'mr-auto'}`}>