search page routing, resized grid images

packages/app/src/Components/Feed/ImageGridItem.tsx

@@ -1,13 +1,21 @@
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { MouseEvent } from "react";
+import { MouseEvent, ReactNode } from "react";
+import { useInView } from "react-intersection-observer";
 import { Link } from "react-router-dom";
 
 import Icon from "@/Components/Icons/Icon";
 import { ProxyImg } from "@/Components/ProxyImg";
 import getEventMedia from "@/Utils/getEventMedia";
 
-const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent) => void }) => {
+export interface ImageGridItemProps {
+  event: TaggedNostrEvent;
+  onClick?: (event: MouseEvent) => void;
+  waitUntilInView?: boolean;
+}
+
+const ImageGridItem = (props: ImageGridItemProps) => {
   const { event, onClick } = props;
+  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
 
   const media = getEventMedia(event);
 
@@ -24,13 +32,26 @@ const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent
     }
   };
 
+  const renderContent = (): ReactNode | undefined => {
+    if (props.waitUntilInView && !inView) return undefined;
+    return (
+      <>
+        <ProxyImg src={media[0].content} alt="Note Media" size={311} className="w-full h-full object-cover" />
+        <div className="absolute right-2 top-2 flex flex-col gap-2">
+          {multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
+          {isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
+        </div>
+      </>
+    );
+  };
+
   return (
-    <Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={myOnClick}>
-      <ProxyImg src={media[0].content} alt="Note Media" className="w-full h-full object-cover" />
-      <div className="absolute right-2 top-2 flex flex-col gap-2">
-        {multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
-        {isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
-      </div>
+    <Link
+      to={`/${noteId}`}
+      className="aspect-square cursor-pointer hover:opacity-80 relative"
+      onClick={myOnClick}
+      ref={ref}>
+      {renderContent()}
     </Link>
   );
 };

packages/app/src/Components/Feed/TimelineRenderer.tsx

@@ -43,7 +43,12 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
     <>
       <div className="grid grid-cols-3 gap-px md:gap-1">
         {mediaEvents.map((event, index) => (
-          <ImageGridItem key={event.id} event={event} onClick={() => setModalEventIndex(index)} />
+          <ImageGridItem
+            key={event.id}
+            event={event}
+            onClick={() => setModalEventIndex(index)}
+            waitUntilInView={index > 15}
+          />
         ))}
       </div>
       {modalEvent && (

packages/app/src/Pages/SearchPage.tsx

@@ -27,6 +27,7 @@ const SearchPage = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
+    if (keyword === params.keyword) return;
     if (keyword) {
       // "navigate" changing only url
       navigate(`/search/${encodeURIComponent(keyword)}`);