Spaces:

enzostvs
/

Logo.Ai

Running

enzostvs HF staff commited on Sep 23, 2024

Commit

4201de5

1 Parent(s): 2a7eb2e

fix infinite scroll

Files changed (3) hide show

app/_actions/logos.ts CHANGED Viewed

@@ -15,7 +15,7 @@ export const getLastLogos = async () => {
   return images.map((image) => image.id);
 };
-const ITEMS_PER_PAGE = 24;
 export const getLogos = async (page: number = 0) => {
   const images = await prisma.logo.findMany({

   return images.map((image) => image.id);
 };
+const ITEMS_PER_PAGE = 12;
 export const getLogos = async (page: number = 0) => {
   const images = await prisma.logo.findMany({

app/_components/gallery/list.tsx CHANGED Viewed

@@ -17,18 +17,21 @@ export const InfiniteGallery = ({
   const [hasMore, setHasMore] = useState(initialHasMore);
   const fetchMoreData = async () => {
-    const logos = await getLogos(page + 1);
-    setLogos([...logos.logos]);
-    setHasMore(logos.hasMore);
     setPage(page + 1);
   };
   return (
     <InfiniteScroll
       dataLength={logos.length} //This is important field to render the next data
       next={fetchMoreData}
       hasMore={hasMore}
-      loader={<h4>Loading...</h4>}
       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">

   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">

app/layout.tsx CHANGED Viewed

@@ -53,7 +53,10 @@ export default function RootLayout({
       <body
         className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
       >
-        <div className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth">
           <Navigation />
           {children}
           <footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">

       <body
         className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
       >
+        <div
+          id="content-wrapper"
+          className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth"
+        >
           <Navigation />
           {children}
           <footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">