fix render

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 = () => {
         <NewNoteCard hashtag={id as string} />
         <HashtagBar />
       </div>
-      <div className="grid grid-cols-1 max-w-xl mx-auto gap-1 px-4">
-        {processedEvents.map((event) =>
+      <div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
+        {processedEvents.slice(0, visibleEvents).map((event) =>
           <PostCard
             key={event.postEvent.id}
             event={event.postEvent}
             metadata={event.metadataEvent}
             replies={event.replies}
           />
-
         )}
       </div>
     </main>

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 = () => {
         <HashtagBar />
       </div>
       <div className={`grid grid-cols-1 max-w-xl mx-auto gap-1 ${isAnimating ? 'animate-pulse' : ''}`}>
-        {processedEvents.map((event) => (
+        {processedEvents.slice(0, visibleEvents).map((event) => (
             <PostCard
               key={event.postEvent.id}
               event={event.postEvent}

client/src/components/routes/Thread.tsx

@@ -12,6 +12,7 @@ import ThreadPostModal from '../forms/ThreadPostModal';
 const Thread = () => {
     const { id } = useParams();
     const [prevMentions, setPrevMentions] = useState<Event[]>([]);
+    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 = () => {
                 <ThreadPostModal OPEvent={OPEvent} />
                 <div className="col-span-full h-0.5 bg-neutral-900 mb-2"/> {/* This is the white line separator */}
                 <div className="grid grid-cols-1 max-w-xl mx-auto gap-1">
-                    {replyEvents.map((event: Event) => (
+                    {replyEvents.slice(0, visibleReplyEvents).map((event: Event) => (
                         <div className={`w-11/12 ${event.tags.find(tag => tag[0] === 'e' && tag[1] !== OPEvent.id) ? 'ml-auto' : 'mr-auto'}`}>
                         <PostCard 
                         key={event.id} 

client/src/utils/subscriptions.ts

@@ -292,7 +292,7 @@ export const subHashtagFeed = (
       filter: {
         "#t": [hashtag],
         kinds: [1],
-        since: Math.floor(now - (3 * 60 * 60)),
+        since: Math.floor(now - (24 * 60 * 60)),
         limit: 20,
       },
       unsub: true