fix: reduce loading latency on create-collection page#153
Conversation
Parallelize project data fetch and eager CSRF token prefetch. Co-authored-by: Yash Pouranik <172860064+yash-pouranik@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR aims to reduce perceived latency on the web dashboard’s /create-collection page by (1) removing a hidden “first-submit” CSRF-token round-trip and (2) adding an explicit loading state for the Ref collection pickers while project collections are fetched.
Changes:
- Web dashboard: eagerly prefetch CSRF token on module load and reuse the in-flight promise in the request interceptor.
- Web dashboard: introduce
collectionsLoadingstate and disable/show “Loading collections…” for Ref pickers (including nested rows) until collections load. - Monorepo root: adds several frontend dependencies to the root
package.jsonand updatespackage-lock.jsonaccordingly.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| package.json | Adds multiple frontend dependencies at the monorepo root. |
| package-lock.json | Updates resolved dependency graph; introduces duplicate lucide-react installs. |
| apps/web-dashboard/src/utils/api.js | Eager CSRF prefetch + interceptor waits on shared promise. |
| apps/web-dashboard/src/pages/CreateCollection.jsx | Adds collections loading state; disables Ref pickers while loading and propagates state to nested FieldRows. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (!csrfToken) { | ||
| csrfToken = await fetchCsrfToken(); | ||
| // Wait for the in-flight eager fetch instead of spawning a new one. | ||
| csrfToken = await (csrfTokenPromise ?? fetchCsrfToken()); | ||
| } |
| // Fetch existing collections for Ref picker — runs immediately on mount | ||
| // so it fires in parallel with any other in-flight requests. | ||
| useEffect(() => { | ||
| let isMounted = true; |
| "dependencies": { | ||
| "path": "^0.12.7" | ||
| "axios": "^1.16.0", | ||
| "lucide-react": "^1.14.0", | ||
| "path": "^0.12.7", | ||
| "react": "^19.2.5", |
|
ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds collectionsLoading/collectionsError state in CreateCollection and threads them through FieldRow so Ref pickers disable and show loading/error placeholders; concurrently, api.js starts an eager module-level csrfTokenPromise and makes the request interceptor await or recreate that promise for mutating requests. ChangesCollections Loading State & CSRF Fetch
Sequence DiagramsequenceDiagram
participant Client
participant Interceptor
participant csrfModule
participant Server
Client->>Interceptor: send mutating request
alt csrfToken available
Interceptor->>Server: inject X-CSRF-Token and forward
else csrfToken missing
Interceptor->>csrfModule: await csrfTokenPromise (start new if null)
csrfModule-->>Interceptor: returns token
Interceptor->>Server: inject X-CSRF-Token and forward
end
Server-->>Client: response
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web-dashboard/src/utils/api.js`:
- Around line 25-35: The request interceptor can get stuck using a settled
promise that resolved to null and also calls config.method.toLowerCase() without
guarding for undefined; update api.interceptors.request.use to first safely
derive method (e.g., const method = (config.method || 'get').toLowerCase()) and
change the CSRF logic so a failed eager fetch is retried: when using
csrfTokenPromise, detect if it has already resolved to a null/invalid token (or
catch its rejection) and in that case set csrfTokenPromise = undefined (or call
fetchCsrfToken() directly) before awaiting; ensure fetchCsrfToken() reassigns
csrfTokenPromise while in-flight and that failures clear/reset csrfTokenPromise
so subsequent mutation requests will attempt a fresh fetch instead of awaiting a
settled null promise.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 63a7a018-9b84-4eb3-bd6e-48f99bf502bc
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
apps/web-dashboard/src/pages/CreateCollection.jsxapps/web-dashboard/src/utils/api.jspackage.json
Prevent stuck promises and undefined method checks in interceptor. Co-authored-by: Yash Pouranik <172860064+yash-pouranik@users.noreply.github.com>
|
@coderabbitai is everything good?? |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 33166
✅ What's looking good
|
|
@coderabbitai |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 17045 🏁 Script executed: Length of output: 9656
✅ My previously flagged issue — ResolvedThe latest commit (
✅ All CI checks passing
|
|
@copilot Last review. |
Agent-Logs-Url: https://github.com/geturbackend/urBackend/sessions/51a1a03e-23ff-403a-8bc7-7e2fc4d0a6ae Co-authored-by: yash-pouranik <172860064+yash-pouranik@users.noreply.github.com>
Final review updates are in commit |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web-dashboard/src/pages/CreateCollection.jsx`:
- Around line 475-477: The catch block currently swallows errors when fetching
collections (leaving users with empty Ref options); change the catch to capture
the error, set a new error state (e.g., collectionsError) and surface minimal
user feedback (call the app's toast/notification helper or render an inline
error message) so failures are visible; keep the finally block behavior
(isMounted check and setCollectionsLoading(false)) but ensure the catch logs the
error (console/error logger) and updates UI state so users can retry or see the
failure.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 61f4da6f-34e2-470b-bb7c-a9792430ebc2
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
apps/web-dashboard/src/pages/CreateCollection.jsx
Introduce error state and user feedback for collections fetch errors. Co-authored-by: Yash Pouranik <172860064+yash-pouranik@users.noreply.github.com>
yash-pouranik
temporarily deployed
to
v0/dashboard-loading-slow-4a22ea74 - urBackend-frankfrut PR #153
Render
Destroyed
|
@coderabbitai |
|
Tip For best results, initiate chat on the files or code changes.
✅ Merge status
The two remaining items (resetting 🔧 What this PR fixesProblem: Slow initial load on the
|
|
for both the issues create a single issue |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain
🏁 Script executed: Length of output: 53
Issue It tracks both items:
You're clear to merge PR |
|
PLease check if it doesnot break current flow |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chainLet me inspect the changed files and related flows to give you a thorough answer. 🏁 Script executed: Length of output: 41075 Let me check the login and project creation pages to confirm their API usage. 🏁 Script executed: Length of output: 20731
🔐 Login
📁 Project Creation
🗂️ Collection Creation
🔑 Auth / Session
Summary
PR |
Problem
The
/create-collectionpage was slow to appear for two compounding reasons:csrfTokenstarted asnull, so the request interceptor inapi.jsfired a blockingGET /api/auth/csrf-tokenbefore every first mutating request.useEffectinCreateCollectionfetched project collections silently, leaving Ref dropdown in an empty/broken state until the request completed with no user feedback.Changes
src/utils/api.jsfetchCsrfToken()immediately and storing thePromise.src/pages/CreateCollection.jsxcollectionsLoadingstate that startstrueand becomesfalsewhen the project fetch resolves.Refpicker<select>elements (direct field refs and array item refs) are nowdisabledwhile loading and show"Loading collections…"as the placeholder option.collectionsLoadingis threaded through all recursiveFieldRowrenders so nested pickers also reflect the loading state.Summary by CodeRabbit