refactored link state management + a lot of other changes...

components/LinkViews/Layouts/CardView.tsx

@@ -1,6 +1,8 @@
 import LinkCard from "@/components/LinkViews/LinkCard";
+import { useLinks } from "@/hooks/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { link } from "fs";
+import { useEffect } from "react";
+import { useInView } from "react-intersection-observer";
 import { GridLoader } from "react-spinners";
 
 export default function CardView({
@@ -12,6 +14,16 @@ export default function CardView({
   editMode?: boolean;
   isLoading?: boolean;
 }) {
+  const { ref, inView } = useInView();
+
+  const { data } = useLinks();
+
+  useEffect(() => {
+    if (inView) {
+      data.fetchNextPage();
+    }
+  }, [data.fetchNextPage, inView]);
+
   return (
     <div className="grid min-[1901px]:grid-cols-5 min-[1501px]:grid-cols-4 min-[881px]:grid-cols-3 min-[551px]:grid-cols-2 grid-cols-1 gap-5 pb-5">
       {links.map((e, i) => {
@@ -26,6 +38,15 @@ export default function CardView({
         );
       })}
 
+      {data.hasNextPage && (
+        <div className="flex flex-col gap-4" ref={ref}>
+          <div className="skeleton h-32 w-full"></div>
+          <div className="skeleton h-4 w-28"></div>
+          <div className="skeleton h-4 w-full"></div>
+          <div className="skeleton h-4 w-full"></div>
+        </div>
+      )}
+
       {isLoading && links.length > 0 && (
         <GridLoader
           color="oklch(var(--p))"