Raghart · Raghart · Jan 13, 2026 · Jan 12, 2026 · Jan 12, 2026 · Jan 13, 2026
diff --git a/back/public/index.html b/back/public/index.html
@@ -17,7 +17,7 @@
         color: white;
       }
     </style>
-    <script type="module" crossorigin src="/assets/index-CfKkQ7O1.js"></script>
+    <script type="module" crossorigin src="/assets/index-B2ym1C3A.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-nNv3qBfI.css">
   </head>
   <body>

diff --git a/front/src/components/ArtistPath/ArtistSelection.tsx b/front/src/components/ArtistPath/ArtistSelection.tsx
@@ -14,7 +14,7 @@ const ArtistSelection = () => {
     const dataLength = data?.getAllArtists ? data.getAllArtists.length : 20;
 
     return(
-        <Box w="full" h="full" direction="column" pt={8} gap={12}>
+        <Box w="full" h="full" direction="column" pt={8} gap={12} pb={20}>
             <Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 40 }}>
                 <ArtistHeader />
             </Zoom>    

diff --git a/front/src/components/DetailsPath/Layout/DetailSongs.tsx b/front/src/components/DetailsPath/Layout/DetailSongs.tsx
@@ -1,29 +1,37 @@
-import { SimpleGrid, Skeleton } from "@chakra-ui/react";
-import InfiniteScrollList from "@/components/Pagination/InfiniteScrollList";
+import { Center, For, SimpleGrid, Skeleton } from "@chakra-ui/react";
 import SongCard from "../../SongCard/SongCard";
 import { ValidDetail } from "@/types/utilTypes";
 import NotFound from "@/components/Error/NotFound";
 import { useAppSelector } from "@/components/Utils/redux-hooks";
 import useGetDetailSongs from "@/components/Utils/hooks/useGetDetailSongs";
 import { SONGCARD_SIZES } from "@/components/constants/SongCardC";
 import { SongResponse } from "@/types/songTypes";
+import InfiniteScroll from "react-infinite-scroll-component";
+import LoadingBeat from "@/components/Utils/LoadingBeat";
+import usePaginateSongs from "@/components/Pagination/PaginateSongs";
 
 const DetailSongs = ({ type, filterValue, error }: { type: ValidDetail, filterValue: string, error: string }) => {
-    const { data, loading, visibleSongs, onLoadMore } = useGetDetailSongs(type, filterValue);
+    const { data, loading, detailSongs } = useGetDetailSongs(type, filterValue);
+    const { visibleSongs, loadMoreSongs } = usePaginateSongs(detailSongs);
     const { activeSong, isPlaying } = useAppSelector(state => state.songs.songState);
-    if (!loading && !data && visibleSongs.length === 0) return <NotFound message={error} />
+    if (!loading && !data && detailSongs.length === 0) return <NotFound message={error} />
 
     return(
-        <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} gap={{ base: 3, sm: 3, md: 3, lg: 4 }} w="full">
-            {data ? (
-                <InfiniteScrollList renderItem={(song: SongResponse) => <SongCard key={song.id} {...song} 
-                    isSongPlaying={isPlaying && activeSong?.id === song.id} />} onLoadMore={onLoadMore}
-                    error={`There was an error while Trying to manage the received data!`} items={visibleSongs} />
-            ) : (
-                Array.from({ length: 20 }).map((_, idx) => (
-                <Skeleton key={idx} w="full" maxW={SONGCARD_SIZES} aspectRatio={3/4} borderRadius="md" />
-            )))}   
-        </SimpleGrid>
+        <InfiniteScroll dataLength={visibleSongs.length} hasMore={visibleSongs.length < detailSongs.length} 
+            loader={<Center m={2}><LoadingBeat /></Center>} next={loadMoreSongs} style={{ overflow: "visible" }}>
+            <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} gap={{ base: 3, sm: 3, md: 3, lg: 4 }} 
+                w="full">
+                {!data && (Array.from({ length: 20 }).map((_, idx) => <Skeleton key={idx} w="full" 
+                    maxW={SONGCARD_SIZES} loading={loading} aspectRatio={3/4} borderRadius="md" />))}
+
+                {data && (
+                    <For each={visibleSongs}>
+                        {(song: SongResponse) => <SongCard key={song.id} {...song} 
+                            isSongPlaying={isPlaying && activeSong?.id === song.id} />}
+                    </For>
+                )}   
+            </SimpleGrid>
+        </InfiniteScroll>
     );
 };
 

diff --git a/front/src/components/DetailsPath/Layout/DetailsLayout.tsx b/front/src/components/DetailsPath/Layout/DetailsLayout.tsx
@@ -1,7 +1,7 @@
 import NotFound from "@/components/Error/NotFound";
 import { ValidDetail } from "@/types/utilTypes";
 import HighlightTitle from "../Utils/HightlightTitle";
-import { Flex } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import ScrollUpArrow from "@/components/Utils/ScrollUpArrow";
 import DetailSongs from "./DetailSongs";
 import { isString, isValidDetail } from "@/types/verify";
@@ -13,16 +13,15 @@ const DetailsLayout = ({ type, gradientInit, gradientMid, error } : { type: Vali
     const { filterValue, hightlightDetails } = useDetailFilter(type);
     if (!isValidDetail(type) || !isString(filterValue)) return <NotFound message={error} />
     return (
-        <Flex direction="column" align="center" justify="center" gap={{ base: 8, sm: 10, md: 11, lg: 11 }} pt={7} 
-            pb={20} textAlign="center">
-            <Zoom triggerOnce direction="down" delay={100}>
+        <Box direction="column" gap={{ base: 8, sm: 10, md: 11, lg: 11 }} pt={7} textAlign="center" pb={20}>
+            <Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 40 }}>
                 <HighlightTitle title={hightlightDetails.title} gradientInit={gradientInit} grandientMid={gradientMid}
                     hightlight={hightlightDetails.hightlight} />
             </Zoom>
 
             <DetailSongs type={type} filterValue={filterValue} error={error} />            
             <ScrollUpArrow />            
-        </Flex>
+        </Box>
     );
 };
 

diff --git a/front/src/components/GenreDetails/GenreDetails.tsx b/front/src/components/GenreDetails/GenreDetails.tsx
@@ -20,13 +20,13 @@ const GenreDetails = () => {
     message={`The genre: "${genre}" was not found in the DB!`} />;
 
   return (
-    <Box w="full" h="full" direction="column" pt={8} gap={5} textAlign="center">
+    <Box w="full" h="full" direction="column" pt={8} gap={5} textAlign="center" pb={20}>
       <Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 40 }}>
         <GenreDetHeader genre={genreKey} />
       </Zoom>
 
       <InfiniteScroll dataLength={dataLength} next={loadMore} hasMore={true} 
-        loader={<Center m={2}><LoadingBeat /></Center>} style={{ display: "block" }}>
+        loader={<Center m={2}><LoadingBeat /></Center>} style={{ overflow: "visible" }}>
           <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} pt={5} gap={{ base: 3, sm: 3, md: 3, 
             lg: 4 }} w="full">
           {!data && (Array.from({ length: 20 }).map((_, idx) => (

diff --git a/front/src/components/GenrePath/GenreSelection.tsx b/front/src/components/GenrePath/GenreSelection.tsx
@@ -1,29 +1,35 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
-import InfiniteScrollList from "@/components/Pagination/InfiniteScrollList";
+import { Box, Center, For, SimpleGrid } from "@chakra-ui/react";
 import GenreCard from "./GenreCard";
 import ScrollUpArrow from "@/components/Utils/ScrollUpArrow";
 import GenreSelHeader from "./GenreSelHeader";
 import useGenreSel from "../Utils/hooks/useGenreSel";
 import { Zoom } from "react-awesome-reveal";
 import { GenreListFormat } from "@/types/genreTypes";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { genreList } from "../Utils/genreIconList";
+import LoadingBeat from "../Utils/LoadingBeat";
 
 const GenreSelection = () => {
-    const { visibleGenres, onLoadMore } = useGenreSel();
+    const { visibleGenres, loadMoreGenres } = useGenreSel();
     return(
-        <Flex w="full" h="full" align="center" justify="center" direction="column" gap={12} pt={8} pb={20}>
-            <Zoom triggerOnce direction="down" delay={100}>
+        <Box w="full" h="full" direction="column" gap={12} pt={8} pb={20}>
+            <Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 30 }}>
                 <GenreSelHeader />
             </Zoom>
 
             <Zoom triggerOnce direction="up" delay={100}>
-                <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} justifyItems="center" gap={4}>
-                    <InfiniteScrollList<GenreListFormat> items={visibleGenres} error="Error with Genre's Pagination" 
-                        renderItem={(genre: GenreListFormat) => (<GenreCard key={genre.name} {...genre} />)} 
-                        onLoadMore={onLoadMore} />
-                </SimpleGrid>
+                <InfiniteScroll next={loadMoreGenres} hasMore={visibleGenres.length < genreList.length} 
+                    loader={<Center m={2}><LoadingBeat /></Center>} dataLength={visibleGenres.length}
+                    style={{ overflow: "visible" }}>
+                    <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} justifyItems="center" gap={4}>
+                        <For each={visibleGenres}>
+                            {(genre: GenreListFormat) => <GenreCard key={genre.name} {...genre} />}
+                        </For>
+                    </SimpleGrid>
+                </InfiniteScroll>
             </Zoom>
             <ScrollUpArrow />
-        </Flex>
+        </Box>
     );
 };
 

diff --git a/front/src/components/LaraRecommendationsPath/LaraRecommendations.tsx b/front/src/components/LaraRecommendationsPath/LaraRecommendations.tsx
@@ -1,5 +1,4 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
-import InfiniteScrollList from "../Pagination/InfiniteScrollList";
+import { Box, Center, For, SimpleGrid } from "@chakra-ui/react";
 import SongCard from "../SongCard/SongCard";
 import LaraHeader from "./LaraHeader";
 import { Navigate } from "react-router-dom";
@@ -8,28 +7,35 @@ import useSongRec from "../Utils/hooks/useSongRec";
 import { useAppSelector } from "../Utils/redux-hooks";
 import { Zoom } from "react-awesome-reveal";
 import { SongResponse } from "@/types/songTypes";
+import InfiniteScroll from "react-infinite-scroll-component";
+import LoadingBeat from "../Utils/LoadingBeat";
 
 const LaraRecommendations = () => {
-    const { visibleSongs, loadMoreSongs } = useSongRec();
+    const { visibleSongs, recommendations, loadMoreSongs } = useSongRec();
     const { activeSong, isPlaying } = useAppSelector(state => state.songs.songState);
     if (visibleSongs.length === 0) return <Navigate to="/" replace />
+
     return(
-        <Flex direction="column" align="center" justify="center" pt={7} pb={14} gap={7}>
-            <Zoom triggerOnce direction="down" delay={100}>
+        <Box direction="column" pt={7} pb={24} gap={7}>
+            <Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 20 }}>
                 <LaraHeader />
             </Zoom>
 
             <Zoom triggerOnce direction="up" delay={100}>
-                <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} pt={4} gap={{ base: 3, sm: 3, md: 3, lg: 4 }} 
-                    w="full">
-                    <InfiniteScrollList renderItem={(song: SongResponse) => <SongCard key={song.id} {...song} 
-                        isSongPlaying={isPlaying && activeSong?.id === song.id} />} items={visibleSongs}
-                        error="There are no song Recommendations avaible in the DB with the data provided"  
-                        onLoadMore={loadMoreSongs} />
-                </SimpleGrid>
+                <InfiniteScroll hasMore={visibleSongs.length < recommendations.length} next={loadMoreSongs}
+                    dataLength={visibleSongs.length} loader={<Center m={2}><LoadingBeat /></Center>}
+                    style={{ overflow: "visible" }}>
+                    <SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} pt={4} w="full" 
+                        gap={{ base: 3, sm: 3, md: 3, lg: 4 }}>
+                        <For each={visibleSongs}>
+                            {(song: SongResponse) => <SongCard key={song.id} {...song} 
+                                isSongPlaying={isPlaying && activeSong?.id === song.id} />}
+                        </For>
+                    </SimpleGrid>
+                </InfiniteScroll>
             </Zoom>
             <ScrollUpArrow />
-        </Flex>
+        </Box>
     );
 };
 

diff --git a/front/src/components/Pagination/InfiniteScrollList.tsx b/front/src/components/Pagination/InfiniteScrollList.tsx
diff --git a/front/src/components/Pagination/PaginateSongs.ts b/front/src/components/Pagination/PaginateSongs.ts
@@ -0,0 +1,16 @@
+import { SongResponse } from "@/types/songTypes";
+import { useState } from "react";
+
+const usePaginateSongs = (songs: SongResponse[]) => {
+    const [visibleCount, setVisibleCount] = useState<number>(20);
+    const visibleSongs = songs.slice(0, visibleCount);
+    const loadMoreSongs = () => {
+        if (visibleSongs.length < songs.length) {
+            setVisibleCount(prev => prev + 20);
+        } 
+    }
+
+    return { visibleSongs, loadMoreSongs }
+};
+
+export default usePaginateSongs;
diff --git a/front/src/components/Utils/hooks/useGenreSel.ts b/front/src/components/Utils/hooks/useGenreSel.ts
@@ -5,13 +5,13 @@ const useGenreSel = () => {
     const [visibleCount, setVisibleCount] = useState<number>(20);
     const visibleGenres = genreList.slice(0, visibleCount);
 
-    const onLoadMore = () => {
+    const loadMoreGenres = () => {
         if (visibleGenres.length < genreList.length) {
             setVisibleCount(prev => prev + 20);
         };
     };
 
-    return { visibleGenres, onLoadMore };
+    return { visibleGenres, loadMoreGenres };
 };
 
 export default useGenreSel;
diff --git a/front/src/components/Utils/hooks/useGetDetailSongs.tsx b/front/src/components/Utils/hooks/useGetDetailSongs.tsx
@@ -2,21 +2,13 @@ import { getAllAlbumSongs, getAllArtistSongs } from "@/queries/DetailQueries";
 import { SongResponse } from "@/types/songTypes";
 import { ValidDetail } from "@/types/utilTypes";
 import { useQuery } from "@apollo/client";
-import { useState } from "react";
 
 const useGetDetailSongs = (type: ValidDetail, filterValue: string) => {
-    const [visibleCount, setVisibleCount] = useState<number>(20);
     const query = type === "album" ? getAllAlbumSongs : getAllArtistSongs;
     const variables = type === "album" ? { album: filterValue } : { artist: filterValue };
     const { loading, data } = useQuery(query, { variables });
     const detailSongs: SongResponse[] = data?.getAllAlbumSongs ?? data?.getAllArtistSongs ?? [];
-    const visibleSongs = detailSongs.slice(0, visibleCount);
-
-    const onLoadMore = () => {
-        if (visibleSongs.length < detailSongs.length) { setVisibleCount(prev => prev + 20); } 
-    };
-
-    return { data, loading, visibleSongs, onLoadMore }
+    return { data, loading, detailSongs }
 };
 
 export default useGetDetailSongs;
diff --git a/front/src/components/Utils/hooks/useSongRec.tsx b/front/src/components/Utils/hooks/useSongRec.tsx
@@ -12,7 +12,7 @@ const useSongRec = () => {
         };
     };
 
-    return { visibleSongs, loadMoreSongs };
+    return { visibleSongs, recommendations, loadMoreSongs };
 };
 
 export default useSongRec;