From 8c9381fc6cc1e9d2b75ce0f0f4153b64b3875c1f Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Fri, 2 Feb 2024 13:51:57 +0200
Subject: [PATCH] AutoLoadMore

---
 packages/app/src/Components/Event/LoadMore.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/Components/Event/LoadMore.tsx b/packages/app/src/Components/Event/LoadMore.tsx
index efaf1586..5c7bf8bd 100644
--- a/packages/app/src/Components/Event/LoadMore.tsx
+++ b/packages/app/src/Components/Event/LoadMore.tsx
@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import { FormattedMessage } from "react-intl";
+import usePageDimensions from "@/Hooks/usePageDimensions";
+import {debounce} from "@/Utils";
 
 interface ShowMoreProps {
   text?: string;
@@ -19,13 +21,15 @@ const LoadMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
 export default LoadMore;
 
 export function AutoLoadMore({ text, onClick, className }: ShowMoreProps) {
-  const { ref, inView } = useInView({ rootMargin: "2000px" });
+  const { ref, inView } = useInView({ rootMargin: "1000px" });
+  const { height } = usePageDimensions();
 
   useEffect(() => {
     if (inView) {
-      onClick();
+      // TODO improve feed performance. Something in image grid makes it slow when feed size grows.
+      return debounce(100, onClick);
     }
-  }, [inView]);
+  }, [inView, height]);
 
   return (
     <div ref={ref}>