diff --git a/back/public/index.html b/back/public/index.html
index 5a1958a..426c412 100644
--- a/back/public/index.html
+++ b/back/public/index.html
@@ -17,7 +17,7 @@
color: white;
}
-
+
diff --git a/front/src/components/GenreDetails/GenreDetails.tsx b/front/src/components/GenreDetails/GenreDetails.tsx
index 42d936a..70b9eb2 100644
--- a/front/src/components/GenreDetails/GenreDetails.tsx
+++ b/front/src/components/GenreDetails/GenreDetails.tsx
@@ -1,43 +1,49 @@
import SongCard from "@/components/SongCard/SongCard";
-import { Flex, SimpleGrid, Skeleton } from "@chakra-ui/react";
+import { Box, Center, For, SimpleGrid, Skeleton } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import ScrollUpArrow from "@/components/Utils/ScrollUpArrow";
-import InfiniteScrollList from "@/components/Pagination/InfiniteScrollList";
import NotFound from "@/components/Error/NotFound";
import { Zoom } from "react-awesome-reveal";
import { SONGCARD_SIZES } from "@/components/constants/SongCardC";
import GenreDetHeader from "./GenreDetHeader";
import { SongResponse } from "@/types/songTypes";
import useGenreSongs from "../Utils/hooks/useGenreSongs";
+import InfiniteScroll from "react-infinite-scroll-component";
+import LoadingBeat from "../Utils/LoadingBeat";
const GenreDetails = () => {
const { genre } = useParams();
const { data, loading, genreKey, loadMore, activeSong, isPlaying, validGenre } = useGenreSongs(genre);
+ const dataLength = data?.getAllGenreSongs ? data.getAllGenreSongs.length : 20;
if (!validGenre || (!loading && !data)) return ;
return (
-
-
+
+
-
- {!data && Array.from({ length: 20 }).map((_, idx) => (
-
- ))}
-
- {data && (
- renderItem={(song: SongResponse) => } items={data.getAllGenreSongs}
- error="There was a problem trying to get the songs of this genre" onLoadMore={loadMore} />
- )}
-
-
+ } style={{ display: "block" }}>
+
+ {!data && (Array.from({ length: 20 }).map((_, idx) => (
+
+ )))}
+
+ {data && (
+
+ {(song: SongResponse) => }
+
+ )}
+
+
-
+
);
};