Skip to content

rs updating ArtistSelection to include better InfiniteScrolling #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Raghart merged 2 commits into from
Jan 12, 2026
Merged

rs updating ArtistSelection to include better InfiniteScrolling #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc10694
r refactoring ArtistSelection to include InfiniteScrolling
Raghart Jan 12, 2026
ff92246
s fixing lint error in ArtistSelection
Raghart Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions back/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
/dist
/node_modules
/build
public/assets/

# Logs
logs
Expand Down
1,517 changes: 0 additions & 1,517 deletions back/public/assets/index-CGufAM4L.js
View file
Open in desktop

This file was deleted.

28 changes: 14 additions & 14 deletions back/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml"
href="https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f3b5.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TrackStack</title>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml"
href="https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f3b5.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TrackStack</title>
<style>
html, body {
margin: 0;
Expand All @@ -16,11 +16,11 @@
background-size: cover;
color: white;
}
</style>
<script type="module" crossorigin src="/assets/index-CGufAM4L.js"></script>
</style>
<script type="module" crossorigin src="/assets/index-BZmU6KnB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-nNv3qBfI.css">
</head>
<body>
<div id="root"></div>
</body>
</head>
<body>
<div id="root"></div>
</body>
</html>
89 changes: 49 additions & 40 deletions front/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions front/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"react-countup": "^6.5.3",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"react-infinite-scroll-component": "^6.1.1",
"react-redux": "^9.2.0",
"react-router-dom": "^7.5.0",
"react-spinners": "^0.17.0",
Expand Down
45 changes: 26 additions & 19 deletions front/src/components/ArtistPath/ArtistSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
import InfiniteScrollList from "@/components/Pagination/InfiniteScrollList";
import { Flex, SimpleGrid, Skeleton } from "@chakra-ui/react";
import { Box, Center, For, SimpleGrid, Skeleton } from "@chakra-ui/react";
import ScrollUpArrow from "@/components/Utils/ScrollUpArrow";
import ArtistCard from "./ArtistCard";
import ArtistHeader from "./ArtistHeader";
import useGetArtistCards from "../Utils/hooks/useGetArtistCards";
import { Zoom } from "react-awesome-reveal";
import { ARTIST_CARD_SIZES } from "../constants/ArtistPathC";
import InfiniteScroll from "react-infinite-scroll-component"
import { ArtistResponse } from "@/types/artistTypes";
import ArtistCard from "./ArtistCard";
import LoadingBeat from "../Utils/LoadingBeat";

const ArtistSelection = () => {
const { data, onLoadMore } = useGetArtistCards();
const dataLength = data?.getAllArtists ? data.getAllArtists.length : 20;

return(
<Flex w="full" h="full" direction="column" justify="center" align="center" pt={8} gap={12} pb={20}>
<Zoom triggerOnce direction="down" delay={100}>
<Box w="full" h="full" direction="column" pt={8} gap={12}>
<Zoom triggerOnce direction="down" delay={100} style={{ paddingBottom: 40 }}>
<ArtistHeader />
</Zoom>
</Zoom>

<InfiniteScroll dataLength={dataLength} next={onLoadMore} hasMore={true}
loader={<Center m={2}><LoadingBeat /></Center>} style={{ overflow: "visible" }}>
<SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} w="full" gap={4}>
{!data && (Array.from({ length: 20 }).map((_, idx) => (
<Skeleton key={idx} w="full" maxW={ARTIST_CARD_SIZES} aspectRatio={3/4}
borderRadius="2xl" inset={0} />
))
)}

<SimpleGrid columns={{ base: 2, sm: 3, md: 4, lg: 5 }} w="full" gap={4}>
{!data && (Array.from({ length: 20 }).map((_, idx) => (
<Skeleton key={idx} w="full" maxW={ARTIST_CARD_SIZES} aspectRatio={3/4} borderRadius="2xl" />
)))}

{data && (
<InfiniteScrollList<ArtistResponse> items={data.getAllArtists} onLoadMore={onLoadMore}
error="Error Trying to get the artists" renderItem={(artist: ArtistResponse) => (
<ArtistCard key={artist.name} {...artist} />
)} />
)}
</SimpleGrid>
{data && (
<For each={data.getAllArtists}>
{(artist: ArtistResponse) => <ArtistCard key={artist.name} {...artist} />}
</For>
)}
</SimpleGrid>
</InfiniteScroll>
<ScrollUpArrow />
</Flex>
</Box>
);
};

Expand Down
Loading