Refactor the /bounties page

[tomsmith8]

When loading the /bounties page. It's super slow and inefficent. Refactor the /bounties page call to make it more efficient.

@stakwork

CodespaceURL

[Evanfeenstra]

🤖 Processing your request... (Stakwork run: https://jobs.stakwork.com/admin/projects/114977818)

I've received your message and started working on it. You'll receive a detailed response shortly.

[Evanfeenstra]

Summary

Stakgraph will refactor the /bounties page to improve loading speed and overall efficiency. The current implementation is slow, likely due to inefficient data fetching and complex UI logic in the main route and bounty rendering components.

---

Planned Changes

• Optimize data fetching and state management in the /bounties page route.
• Refactor the TicketsPage and Bounties components to reduce unnecessary re-renders and streamline assignment/UI logic.
• Validate improvements by measuring page load times before and after changes.

---

Files/Areas Affected

• /bounties page route
• TicketsPage component
• Bounties component (including assignment and UI logic)

---

Goal: Faster, more efficient /bounties page load for improved user experience.

[Evanfeenstra]

Summary

This pull request significantly improves the performance and efficiency of the /bounties page by refactoring both backend and frontend logic. The changes address slow loading times and inefficient data fetching/rendering, resulting in a much faster and more scalable user experience.

---

Changes Made

Backend (Go)

• Batch Data Fetching
  • Added new methods in db.go for batch fetching:
    • GetPersonsByPubkeys: Fetches multiple persons in a single query.
    • GetWorkspacesByUuids: Fetches multiple workspaces in a single query.
    • GetProofsByBountyIDs: Fetches all proofs for a set of bounty IDs in one query.
• Optimized Bounty Response Generation
  • Refactored GenerateBountyResponse in bounty.go to:
    • Collect all required IDs (owners, assignees, workspaces, bounty IDs) up front.
    • Use the new batch methods to fetch related data in bulk, eliminating N+1 query patterns.
    • Assemble the bounty response objects efficiently using the pre-fetched data.

Frontend (React/TypeScript)

• Virtualized List Rendering
  • Introduced a new Tickets component using react-window for virtualization, allowing efficient rendering of large bounty lists.
  • Only visible bounties are rendered to the DOM, drastically reducing rendering overhead.
• Component Optimization
  • Refactored the Bounties component:
    • Wrapped with React.memo to prevent unnecessary re-renders.
    • Used useMemo and useCallback to memoize expensive computations and props.
    • Improved role-checking and UI logic for assignment actions.
• Page Integration
  • Updated TicketsPage to use the new optimized Tickets component.
  • Ensured modal and connect card logic remains functional and efficient.

---

Architecture Improvements

• Eliminated N+1 Query Problem: Backend now fetches all related data in a few queries, regardless of the number of bounties, greatly reducing database load and response time.
• Frontend Virtualization: Large bounty lists are now efficiently rendered, improving initial load and scroll performance.
• Component Memoization: Key React components are now memoized, reducing unnecessary renders and improving UI responsiveness.
• Scalability: The new architecture supports a much larger number of bounties without performance degradation.

---

Impact

• Page load times for /bounties are now significantly faster.
• Reduced server/database load and frontend rendering cost.
• Improved user experience, especially for organizations with many bounties.

[Evanfeenstra]

The code is now available—please review it directly in the codespace.

Code

[Evanfeenstra]

The changes are ready for review.

[Evanfeenstra]

Your pull request is ready for review!
You can view it here: PR Link

[stakgraph]

🤖 Processing your request... Stakwork run

I've received your message and started working on it. You'll receive a detailed response shortly.

[stakgraph]

Summary

Stakgraph will refactor the /bounties page to significantly improve its loading speed and efficiency. This is in response to performance issues, especially with large datasets (e.g., 1000+ bounties). The goal is to optimize data fetching and rendering logic while preserving all existing functionality.

---

Planned Changes

• Analyze and profile the current /bounties page load process.
• Refactor the TicketsPage and Tickets components to:
  • Optimize data retrieval (e.g., reduce over-fetching, implement pagination or lazy loading if needed).
  • Streamline rendering logic, especially in the Bounties component.
  • Minimize unnecessary re-renders and complex state management.
• Ensure all routes using TicketsPage (/bounties, /tickets, /t/, /b/, /bounty/:bountyId) remain functional and performant.

---

Files/Areas Affected

• TicketsPage component
• Tickets component
• Bounties component (potential bottleneck)
• Data fetching logic for bounties
• Related modal and card components as needed

---

Next Steps:
Begin profiling and incremental refactoring, with ongoing testing to ensure no loss of functionality.