Skip to content

Add lightweight animated pagination to DevTools listing (applies to all filters) #76

@SyedFahad7

Description

@SyedFahad7

Overview

Currently, the DevTools listing renders all tools at once with no pagination. This causes very long pages and poor navigation experience as the dataset grows. This issue tracks adding pagination across the listing — including when users filter by Category or Type from the left sidebar.

Reference style (simple, not heavy):
👉 https://21st.dev/community/components/ruixenui/sliding-pagination/default


##Requirements

  • Add pagination to the DevTools listing
  • Page size: 10 rows × 3 columns = 30 tools per page
  • Pagination must work for:
    • Default "all tools" view
    • Filtered by Category
    • Filtered by Type
    • Combined filter states (if supported)
  • On page change, tools should shift with a light, simple animation (no heavy transitions)
  • Search results (when tools returned by search query exceed 9, pagination kicks in)
  • Pagination UI stays at the bottom of the tools grid

Reset behavior:
When filters or search change, reset back to page 1.

Empty state:
If filtered result is 0, show an empty state and hide pagination controls entirely.


✔️ Acceptance Criteria

  • Tools list is limited to 30 items per page
  • Pagination updates total pages based on current filtered result
  • Changing page updates visible tools correctly
  • Applying/removing Category or Type filters recalculates pagination correctly
  • Page transition animation is smooth and lightweight
  • No noticeable performance drop on large datasets

🛠️ Implementation Notes

  • Keep pagination logic generic and reusable — props: page, pageSize, total, onPageChange
  • Compute filteredTools first, then slice for the current page
  • Only render pagination controls when filteredTools.length > pageSize
  • Render pagination controls when SearchResult > 9 (i.e. 10 or more tools for search based results)
  • Follow existing design system/tokens, avoid adding heavy UI dependencies

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions