perf: Paginate or lazy-render the "No Activity Yet" user section to prevent layout freezing on the last page

[yashvi-3106]

Description

When navigating to the very last page of the leaderboard, there is a severe performance freeze/lag. This is because all inactive users (those with a score of 0 in the overall leaderboard) are appended to the table at the same time without any pagination:

if (inactiveList.length > 0 && (currentPage === totalPages || isSearching)) {
  inactiveList.forEach((user) => {
    body.appendChild(renderLeaderboardRow(user, ""));
    mobileCards.appendChild(renderMobileCard(user, ""));
  });
}

As the database of registered users grows, this results in hundreds of DOM node insertions simultaneously, causing the browser thread to lock up.

To Reproduce

Navigate to the /leaderboard.
Click on the last page number in the pagination.
Observe the layout freeze / render lag.

Suggested Fix

Move inactive users to a separate, dedicated "Inactive Users" tab to prevent loading them on the primary leaderboard view.
Alternatively, paginate the inactive list separately so they are loaded incrementally

[github-actions]

Thank you for opening an issue.

Please review our CONTRIBUTING.md guidelines before getting started.

A maintainer will review this issue shortly. If you would like to work on the issue yourself, please leave a comment requesting assignment.

Issue Assignment Policy

• The issue creator is given the first priority to work on their issue.
• If the creator declines or does not request assignment, the issue will be assigned to others in the order of requests received.
• Please do not submit PRs or begin work until you are officially assigned.

Note: This project is currently maintained by a solo maintainer, so reviews, assignments, and responses may sometimes take a little time. Thanks for your patience.

[mayank188]

Hi @codepvg,

I would like to work on this issue under GSSoC'26.

I have reviewed the issue and understand that the performance bottleneck occurs because all inactive users are rendered simultaneously on the last leaderboard page. I can optimize this by implementing separate pagination or lazy rendering for inactive users, ensuring better performance while preserving the existing functionality.

I'll ensure the solution is clean, efficient, thoroughly tested, and follows the project's coding standards.

Kindly assign this issue to me if it becomes available.

Thank you! 🚀

[jagdish-15]

Instead of introducing a separate tab or a second pagination flow, I'd prefer a unified pagination approach.

Rather than paginating inactive users separately, treat them as part of the same sorted leaderboard array. Paginate the combined array as usual, and during rendering, insert the "No Activity Yet" divider when transitioning from the last active user to the first inactive user.

This keeps the leaderboard continuous, avoids rendering hundreds of inactive users at once, and eliminates the need for separate pagination or navigation while still addressing the performance issue. Feel free to implement it this way if you'd like.

Also, please make sure this still correctly distinguishes users who have a score of 0 in the currently selected view (e.g., daily, weekly, or monthly) from users who truly belong in the "No Activity Yet" section. The divider should only separate users whose overall leaderboard score is 0 (i.e., they've never been active), not users who simply have no activity in the current timeframe but do have a non-zero overall score.