bug fixed + small visual improvements + improved user experience

pages/collections/[id].tsx

@@ -50,7 +50,7 @@ export default function Index() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
+        <div className="border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-sky-100 dark:from-gray-800 from-10% via-gray-100 via-20% to-white dark:to-neutral-800 to-100% rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
           <div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
             {activeCollection && (
               <div className="flex gap-3 items-center">

pages/public/collections/[id].tsx

@@ -4,10 +4,25 @@ import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import { PublicCollectionIncludingLinks } from "@/types/global";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
+import { motion, Variants } from "framer-motion";
+
+const cardVariants: Variants = {
+  offscreen: {
+    y: 50,
+    opacity: 0,
+  },
+  onscreen: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.4,
+    },
+  },
+};
 
 export default function PublicCollections() {
   const router = useRouter();
-  const hasReachedBottom = useDetectPageBottom();
+  const { reachedBottom, setReachedBottom } = useDetectPageBottom();
 
   const [data, setData] = useState<PublicCollectionIncludingLinks>();
 
@@ -33,19 +48,21 @@ export default function PublicCollections() {
   }, []);
 
   useEffect(() => {
-    if (hasReachedBottom && router.query.id) {
+    if (reachedBottom && router.query.id) {
       getPublicCollectionData(
         Number(router.query.id),
         data as PublicCollectionIncludingLinks,
         setData
       );
     }
-  }, [hasReachedBottom]);
+
+    setReachedBottom(false);
+  }, [reachedBottom]);
 
   return data ? (
     <div className="max-w-4xl mx-auto p-5 bg">
       <div
-        className={`text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
+        className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
       >
         <p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
 
@@ -59,7 +76,18 @@ export default function PublicCollections() {
 
       <div className="flex flex-col gap-5 my-8">
         {data?.links?.map((e, i) => {
-          return <LinkCard key={i} link={e} count={i} />;
+          return (
+            <motion.div
+              key={i}
+              initial="offscreen"
+              whileInView="onscreen"
+              viewport={{ once: true, amount: 0.8 }}
+            >
+              <motion.div variants={cardVariants}>
+                <LinkCard link={e} count={i} />
+              </motion.div>
+            </motion.div>
+          );
         })}
       </div>