Right now, the All Challenges page in the frontend loads all challenges at once. This causes slow loading and makes the page heavy when there are many challenges.

I’d like to add pagination so only 20 challenges are shown at a time, with numbered navigation (Previous, 1, 2, 3, …, Next). This will make the page faster and easier to use.

Affected Components

Frontend:
frontend_v2/src/app/components/challengelist/challengelist.component.ts
frontend_v2/src/app/components/challengelist/challengelist.component.html
frontend_v2/src/app/components/challengelist/challengelist.component.scss

Backend (if needed):
apps/challenges/views.py — to add pagination support to challenge list APIs.

Proposed Approach

Frontend:
Add numbered pagination to the All Challenges page using Angular.
Show 20 challenges per page.
Update API calls to use ?page= and ?page_size= parameters.
Add smooth scroll to top when changing pages.
Show a loading indicator while switching pages.
Keep pagination separate for “Ongoing”, “Upcoming”, and “Past” tabs.

Backend:
Use Django REST Framework pagination in challenge list APIs.
Add a custom pagination class like this:

class ChallengePagination(PageNumberPagination):
page_size = 20
page_size_query_param = 'page_size'
max_page_size = 100

Why This Is Needed
Reduces page load time.
Minimizes API load.
Makes browsing challenges smoother.
Keeps the UI consistent across tabs.