Virtualized Infinite-Scroll Gig Explorer with Server-Driven Filters

[meshackyaro]

Description

This issue aims to address the implementation of Virtualized Infinite-Scroll Gig Explorer with Server-Driven Filters.

The core objective is to: Rebuild the Gig Explorer with windowed virtualization, cursor-based infinite scroll, and URL-synced server-driven filters/sort that survive refresh and back/forward navigation.

By completing this feature, we will ensure that the TrustFlow protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🔴 Hard

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Virtualized Infinite-Scroll Gig Explorer with Server-Driven Filters
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Rebuild the Gig Explorer with windowed virtualization, cursor-based infinite scroll, and URL-synced server-driven filters/sort that survive refresh and back/forward navigation.
• Any PR that introduces TypeScript errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

1-3 days

[TheBigWealth89]

I would like to work on this issue, please assign it to thanks

[Phantomcall]

I'd like to take this on.

I have experience building performant React/Next.js applications with virtualized lists, infinite scrolling, URL-driven state management, and TypeScript. I'm comfortable working within the Next.js App Router and optimizing data-heavy interfaces while preserving a responsive user experience.

For this issue, I'll:

• Review the existing Next.js App Router architecture to integrate the Gig Explorer without disrupting current navigation patterns.
• Rebuild the Gig Explorer using windowed virtualization to efficiently render large datasets while minimizing DOM overhead.
• Implement cursor-based infinite scrolling that seamlessly loads additional results as users browse.
• Synchronize filters and sorting with URL search parameters so state persists across refreshes and browser back/forward navigation.
• Keep filtering and sorting server-driven to ensure consistent pagination and avoid client/server state mismatches.
• Ensure the UI is fully responsive using the project's existing styling approach (Tailwind CSS or CSS modules, as appropriate).
• Document any new dependencies or architectural decisions introduced during the implementation.
• Update CI dependency caching where needed to improve install performance without changing application behavior.
• Add or update tests covering filter synchronization, infinite scrolling behavior, and navigation persistence where applicable.
• Verify npm run lint, npm run typecheck, and npm run build all pass before submitting the PR.

I'll keep the implementation focused on performance, maintainability, and backward compatibility with the existing frontend architecture while ensuring the feature remains easy to review.

GitHub: @PHANTOM_CALL

[IamHarrie-Labs]

Hi, I'd like to take this one on.

I'll rebuild the Gig Explorer using a windowed virtualization approach so the list stays fast no matter how many gigs are loaded, paired with cursor-based infinite scroll instead of page numbers, since cursors hold up better once the underlying data set changes between requests.

Filters and sort will live in the URL as query params, kept in sync with the UI state, so a refresh or hitting back and forward in the browser puts you right back where you were, filters and all, not just at the top of an empty list.

I'll build it within the existing Next.js App Router structure, keep it responsive with Tailwind, and add npm dependency caching to CI so the pipeline stays under the 3 minute target. Before opening the PR I'll run lint, typecheck, and a production build to make sure nothing breaks CI, and I'll write up any new dependencies or architectural calls I make along the way, per the issue notes.

[grantfox-oss]

🦊 GrantFox — @Phantomcall has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #68)
2. Your PR will be reviewed by the trustflow-protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🦊 GrantFox — @IamHarrie-Labs has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #68)
2. Your PR will be reviewed by the trustflow-protocol maintainers

Good luck! Track your progress on GrantFox.