add pagination for albums 🎧

main/background.ts

@@ -178,9 +178,9 @@ app.whenReady().then(() => {
 });
 
 // @hiaaryan: IPC Handlers from Renderer
-ipcMain.handle("getAllAlbums", async () => {
-  const albums = await getAlbums();
-  return albums;
+ipcMain.handle("getAlbums", async (_, page) => {
+  console.log(page);
+  return await getAlbums(page);
 });
 
 ipcMain.handle("getAllPlaylists", async () => {

main/helpers/db/connectDB.ts

@@ -53,8 +53,13 @@ export const getSongs = async () => {
   return await db.select().from(songs).orderBy(songs.name);
 };
 
-export const getAlbums = async () => {
-  return await db.select().from(albums).orderBy(albums.name);
+export const getAlbums = async (page: number, limit: number = 15) => {
+  return await db
+    .select()
+    .from(albums)
+    .orderBy(albums.name)
+    .limit(limit)
+    .offset((page - 1) * limit);
 };
 
 export const getPlaylists = async () => {

package.json

@@ -30,8 +30,8 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tabler/icons-react": "^3.12.0",
     "@types/better-sqlite3": "^7.6.11",
-    "axios": "^1.7.4",
-    "better-sqlite3": "^11.1.2",
+    "axios": "^1.7.5",
+    "better-sqlite3": "^11.2.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -40,29 +40,29 @@
     "electron-log": "^5.1.7",
     "electron-serve": "^1.3.0",
     "electron-store": "^8.2.0",
-    "embla-carousel-react": "^8.1.8",
-    "eslint-config-next": "^14.2.5",
+    "embla-carousel-react": "^8.2.0",
+    "eslint-config-next": "^14.2.6",
     "howler": "^2.2.4",
     "music-metadata": "^7.14.0",
     "next-themes": "^0.3.0",
-    "react-hook-form": "^7.52.2",
+    "react-hook-form": "^7.53.0",
     "sonner": "^1.5.0",
     "tailwind-gradient-mask-image": "^1.2.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "wavesurfer.js": "^7.8.3",
+    "wavesurfer.js": "^7.8.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@electron/rebuild": "^3.6.0",
     "@types/howler": "^2.2.11",
-    "@types/node": "^22.4.0",
-    "@types/react": "^18.3.3",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.4",
     "autoprefixer": "^10.4.20",
-    "drizzle-kit": "^0.24.0",
-    "electron": "^31.4.0",
+    "drizzle-kit": "^0.24.1",
+    "electron": "^32.0.1",
     "electron-builder": "^24.13.3",
-    "next": "^14.2.5",
+    "next": "^14.2.6",
     "nextron": "^9.1.0",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",

renderer/components/main/navbar.tsx

@@ -218,7 +218,7 @@ const Navbar = () => {
             <CommandList>
               {loading && (
                 <div className="flex h-[325px] w-full items-center justify-center">
-                  <Spinner className="h-8 w-8" />
+                  <Spinner className="h-6 w-6" />
                 </div>
               )}
               {search && !loading && (

renderer/components/ui/album.tsx

@@ -25,7 +25,7 @@ const AlbumCard: React.FC<AlbumCardProps> = ({ album }) => {
               fill
               loading="lazy"
               className="z-10 object-cover"
-              quality={25}
+              quality={10}
             />
           </div>
           <div className="mt-8 flex w-full flex-col overflow-clip">

renderer/pages/albums.tsx

@@ -1,14 +1,51 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useRef } from "react";
 import AlbumCard from "@/components/ui/album";
+import Spinner from "@/components/ui/spinner";
 
 export default function Albums() {
   const [albums, setAlbums] = useState([]);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const observer = useRef();
+
+  const loadAlbums = useCallback(async () => {
+    if (loading || !hasMore) return;
+    setLoading(true);
+
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    try {
+      const newAlbums = await window.ipc.invoke("getAlbums", page);
+      if (newAlbums.length === 0) {
+        setHasMore(false);
+      } else {
+        setAlbums((prevAlbums) => [...prevAlbums, ...newAlbums]);
+        setPage((prevPage) => prevPage + 1);
+      }
+    } catch (error) {
+      console.error("Error loading albums:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, loading, hasMore]);
 
   useEffect(() => {
-    window.ipc.invoke("getAllAlbums").then((response) => {
-      setAlbums(response);
-    });
-  }, []);
+    loadAlbums(); // Load initial albums
+  }, []); // Empty dependency array ensures this only runs once on mount
+
+  const lastAlbumElementRef = useCallback(
+    (node) => {
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading) {
+          loadAlbums();
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [loadAlbums, hasMore, loading],
+  );
 
   return (
     <div className="flex flex-col gap-8">
@@ -18,9 +55,20 @@ export default function Albums() {
           <div className="opacity-50">All of your albums in one place.</div>
         </div>
         <div className="grid w-full grid-cols-5 gap-8">
-          {albums &&
-            albums.map((album) => <AlbumCard key={album.id} album={album} />)}
+          {albums.map((album, index) => (
+            <div
+              key={album.id}
+              ref={index === albums.length - 1 ? lastAlbumElementRef : null}
+            >
+              <AlbumCard album={album} />
+            </div>
+          ))}
         </div>
+        {loading && (
+          <div className="flex w-full items-center justify-center">
+            <Spinner className="h-6 w-6" />
+          </div>
+        )}
       </div>
     </div>
   );