forked from Kieran/snort
memoize imagegriditem
This commit is contained in:
parent
1278867ad0
commit
53488a9c59
@ -1,5 +1,5 @@
|
|||||||
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
import { NostrLink, TaggedNostrEvent } from "@snort/system";
|
||||||
import { MouseEvent, ReactNode } from "react";
|
import {memo, MouseEvent, ReactNode} from "react";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
@ -13,9 +13,9 @@ export interface ImageGridItemProps {
|
|||||||
waitUntilInView?: boolean;
|
waitUntilInView?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ImageGridItem = (props: ImageGridItemProps) => {
|
function ImageGridItem(props: ImageGridItemProps) {
|
||||||
const { event, onClick } = props;
|
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);
|
const media = getEventMedia(event);
|
||||||
|
|
||||||
@ -56,4 +56,4 @@ const ImageGridItem = (props: ImageGridItemProps) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ImageGridItem;
|
export default memo(ImageGridItem);
|
||||||
|
@ -61,7 +61,7 @@ export default function Index() {
|
|||||||
<div className="w-full max-w-screen-xl">
|
<div className="w-full max-w-screen-xl">
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
<NavSidebar />
|
<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 />}
|
{!shouldHideHeader && <Header />}
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
@ -923,7 +923,7 @@ svg.repeat {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pb-safe-area {
|
.pb-safe-area {
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: calc(20vh + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
.active > .icon-outline {
|
.active > .icon-outline {
|
||||||
|
Loading…
Reference in New Issue
Block a user