Add Pagination to "All Challenges"

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.

Start with frontend_v2/src/app/components/challengelist/challengelist.component.ts and its HTML and SCSS, then inspect the challenge list APIs in apps/challenges/views.py. Confirm how the Ongoing, Upcoming, and Past tabs load data before adding the requested page-size and page-navigation behavior. Done means each tab shows 20 challenges per page with loading, navigation, and scroll-to-top behavior working consistently.

Written by the indexing model from the issue text.