infinite scroll

src/components/infinite-scroll.tsx

@@ -0,0 +1,73 @@
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { Box } from "@mantine/core";
+
+interface InfiniteScrollProps<T> {
+  items: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  batchSize?: number;
+  initialCount?: number;
+  rootMargin?: string;
+  loader?: ReactNode;
+  hasMore?: boolean;
+  loading?: boolean;
+  onLoadMore?: () => void;
+}
+
+const InfiniteScroll = <T,>({
+  items,
+  renderItem,
+  batchSize = 25,
+  initialCount = batchSize,
+  rootMargin = "600px 0px",
+  loader,
+  hasMore = false,
+  loading = false,
+  onLoadMore,
+}: InfiniteScrollProps<T>) => {
+  const [visibleCount, setVisibleCount] = useState(initialCount);
+  const [prevItems, setPrevItems] = useState(items);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  if (prevItems !== items) {
+    setPrevItems(items);
+    setVisibleCount(initialCount);
+  }
+
+  const hasHiddenItems = visibleCount < items.length;
+  const showLoader = hasHiddenItems || hasMore || loading;
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+
+        if (visibleCount < items.length) {
+          setVisibleCount((count) => Math.min(count + batchSize, items.length));
+        } else if (hasMore && !loading) {
+          onLoadMore?.();
+        }
+      },
+      { rootMargin }
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [items, visibleCount, batchSize, hasMore, loading, onLoadMore, rootMargin]);
+
+  return (
+    <>
+      {items.slice(0, visibleCount).map((item, index) => renderItem(item, index))}
+      {showLoader && (
+        <>
+          <Box ref={sentinelRef} />
+          {loader}
+        </>
+      )}
+    </>
+  );
+};
+
+export default InfiniteScroll;