⚡ Bolt: Concurrent data fetching in project detail page#109
Conversation
- Replaced sequential `fetch` calls in `fetchProjectAndLists` with `Promise.all` for concurrent execution. - This addresses a performance bottleneck where fetching project details, its lists, and all lists sequentially caused a network waterfall, artificially increasing UI latency and Time to First Byte (TTFB). - Expected impact: Reduced page load time for the project detail page. - Verified via passing tests, linting, and visually via Playwright screenshot. Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
Refactors the Project Detail page’s client-side initialization to fetch project data and related lists concurrently in order to reduce network waterfall latency and improve perceived load time.
Changes:
- Executes
/api/projects/:id,/api/projects/:id/lists, and/api/listsrequests in parallel viaPromise.all. - Parses the three JSON payloads in parallel via a second
Promise.all.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Fetch project details, lists in project, and all user lists concurrently | ||
| const [projectResponse, listsResponse, allListsResponse] = await Promise.all([ | ||
| fetch(`/api/projects/${projectId}`), | ||
| fetch(`/api/projects/${projectId}/lists`), | ||
| fetch("/api/lists"), | ||
| ]); | ||
|
|
||
| const [projectResult, listsResult, allListsResult] = await Promise.all([ | ||
| projectResponse.json(), | ||
| listsResponse.json(), | ||
| allListsResponse.json(), | ||
| ]); |
| // Fetch project details, lists in project, and all user lists concurrently | ||
| const [projectResponse, listsResponse, allListsResponse] = await Promise.all([ | ||
| fetch(`/api/projects/${projectId}`), | ||
| fetch(`/api/projects/${projectId}/lists`), | ||
| fetch("/api/lists"), | ||
| ]); |
💡 What: Refactored the
fetchProjectAndListsfunction in the project detail page (src/app/projects/[id]/page.tsx) to execute multiple independent API requests concurrently usingPromise.all.🎯 Why: Previously, the function fetched project details, lists for the project, and all user lists sequentially. This created a network waterfall, where each request had to wait for the previous one to complete, artificially inflating the Time to First Byte (TTFB) and overall UI latency. Since these data models are independent during this initialization phase, they can be fetched in parallel.
📊 Impact: Reduces total network latency for fetching initial page data, resulting in a significantly faster page load and improved perceived performance for the project detail view.
🔬 Measurement: Verified by running existing tests and capturing a successful page render screenshot via Playwright. Can be measured by comparing the network tab waterfall timeline in browser dev tools before and after this change.
PR created automatically by Jules for task 5347337993696400750 started by @aicoder2009