app/_components/gallery/list.tsx

"use client";

import InfiniteScroll from "react-infinite-scroll-component";
import Image from "next/image";
import { useState } from "react";
import { getLogos } from "@/app/_actions/logos";

export const InfiniteGallery = ({
  logos: initialLogos,
  hasMore: initialHasMore,
}: {
  logos: Array<number>;
  hasMore: boolean;
}) => {
  const [page, setPage] = useState(0);
  const [logos, setLogos] = useState([...initialLogos]);
  const [hasMore, setHasMore] = useState(initialHasMore);

  const fetchMoreData = async () => {
    const newLogos = await getLogos(page + 1);
    setLogos([...logos, ...newLogos.logos]);
    setHasMore(newLogos.hasMore);
    setPage(page + 1);
  };

  return (
    <InfiniteScroll
      scrollableTarget="content-wrapper"
      dataLength={logos.length} //This is important field to render the next data
      next={fetchMoreData}
      hasMore={hasMore}
      loader={
        <div className="w-full max-lg:col-span-2 text-center">Loading...</div>
      }
      className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap"
      endMessage={
        <div className="w-full max-lg:col-span-2 text-zinc-400 text-center">
          Yay! You have seen it all
        </div>
      }
    >
      {logos.map((index) => (
        <Image
          key={index}
          src={`/api/images/${index}`}
          alt="Generated logo"
          width={500}
          height={500}
          className="rounded-2xl w-full lg:size-72 object-cover"
        />
      ))}
    </InfiniteScroll>
  );
};