From 53488a9c59751607b0cbd30b6f11139bf3bfeeaa Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 10 Jan 2024 18:48:36 +0200
Subject: [PATCH] memoize imagegriditem

---
 packages/app/src/Components/Feed/ImageGridItem.tsx | 8 ++++----
 packages/app/src/Pages/Layout/index.tsx            | 2 +-
 packages/app/src/index.css                         | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/Components/Feed/ImageGridItem.tsx b/packages/app/src/Components/Feed/ImageGridItem.tsx
index 44effe0d..f2845dc8 100644
--- a/packages/app/src/Components/Feed/ImageGridItem.tsx
+++ b/packages/app/src/Components/Feed/ImageGridItem.tsx
@@ -1,5 +1,5 @@
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { MouseEvent, ReactNode } from "react";
+import {memo, MouseEvent, ReactNode} from "react";
 import { useInView } from "react-intersection-observer";
 import { Link } from "react-router-dom";
 
@@ -13,9 +13,9 @@ export interface ImageGridItemProps {
   waitUntilInView?: boolean;
 }
 
-const ImageGridItem = (props: ImageGridItemProps) => {
+function ImageGridItem(props: ImageGridItemProps) {
   const { event, onClick } = props;
-  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
+  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "0px 0px 3000px 0px" });
 
   const media = getEventMedia(event);
 
@@ -56,4 +56,4 @@ const ImageGridItem = (props: ImageGridItemProps) => {
   );
 };
 
-export default ImageGridItem;
+export default memo(ImageGridItem);
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index f4cb63c6..7a77e3dc 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -61,7 +61,7 @@ export default function Index() {
         <div className="w-full max-w-screen-xl">
           <div className="flex flex-row">
             <NavSidebar />
-            <div className="flex flex-1 flex-col pb-[50vh] w-full md:w-1/3">
+            <div className="flex flex-1 flex-col pb-safe-area w-full md:w-1/3">
               {!shouldHideHeader && <Header />}
               <ErrorBoundary>
                 <Outlet />
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 1aa971cf..b6b6542b 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -923,7 +923,7 @@ svg.repeat {
 }
 
 .pb-safe-area {
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: calc(20vh + env(safe-area-inset-bottom));
 }
 
 .active > .icon-outline {