Fix task overlay overlapping with other pages on navigation #2573
Conversation
When navigating to other pages (e.g., Workspaces) while a task is running, the TaskOverlay remained visible and overlapped with the destination page. This adds pathname change detection to auto-hide the overlay when the user navigates away, allowing the task to continue running in the background.
|
Finished running flow.
|
||||||||||||||||||
|
📝 WalkthroughWalkthroughThe task overlay component now automatically hides when users navigate to different routes by monitoring pathname changes via Next.js hooks and invoking the hideOverlay action from the store. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (8)**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
Files:
**/*.tsx📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
Files:
**/*.{js,ts,tsx,jsx,py,java,cs,cpp,c,go,rb,php,swift,kt,scala,rs,dart}📄 CodeRabbit inference engine (.cursor/rules/language-support.mdc)
Files:
**/*📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
Files:
**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
Files:
**/*.{ts,tsx,js,jsx,css}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{tsx,ts}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (10)📓 Common learnings📚 Learning: 2025-11-25T03:05:31.051ZApplied to files:
📚 Learning: 2025-12-03T05:18:36.138ZApplied to files:
📚 Learning: 2025-11-25T03:07:07.498ZApplied to files:
📚 Learning: 2025-11-25T03:07:19.740ZApplied to files:
📚 Learning: 2025-11-25T03:07:07.498ZApplied to files:
📚 Learning: 2025-11-25T03:07:19.740ZApplied to files:
📚 Learning: 2025-11-25T03:07:19.740ZApplied to files:
📚 Learning: 2025-06-23T12:31:58.286ZApplied to files:
📚 Learning: 2025-06-23T12:31:58.286ZApplied to files:
🧬 Code graph analysis (1)apps/studio.giselles.ai/app/(main)/ui/task-overlay.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (3)
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 |
There was a problem hiding this comment.
Pull request overview
This PR fixes an overlapping issue where the TaskOverlay component remained visible when navigating to other pages during task execution. The solution adds automatic overlay hiding on navigation while allowing tasks to continue running in the background.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (prevPathnameRef.current !== pathname && isVisible) { | ||
| hideOverlay(); | ||
| } | ||
| prevPathnameRef.current = pathname; |
There was a problem hiding this comment.
The ref is updated after checking the condition, which means on the first render when isVisible is true, the overlay will be hidden even though the pathname hasn't actually changed. The ref should be updated in a way that skips the initial render, or the condition should check if prevPathnameRef.current is defined before hiding.
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||
PR Code Suggestions ✨No code suggestions found for the PR. |
🔍 QA Testing Assistant by Giselle📋 Manual QA ChecklistBased on the changes in this PR, here are the key areas to test manually:
✨ Prompt for AI AgentsUse the following prompts with Cursor or Claude Code to automate E2E testing: 📝 E2E Test Generation Prompt |
User description
Summary
Changes
Problem
When running an App in Playground and navigating to Workspaces (or other pages) via the sidebar, the Task screen and destination page overlapped.
Solution
Added pathname change detection in
TaskOverlaycomponent. When the user navigates away, the overlay automatically hides while the task continues executing server-side.Testing
PR Type
Bug fix
Description
Auto-hide TaskOverlay when navigating away from current page
Task continues executing in background after navigation
Prevents overlay from overlapping destination page content
Diagram Walkthrough
File Walkthrough
task-overlay.tsx
Add pathname change detection to auto-hide overlayapps/studio.giselles.ai/app/(main)/ui/task-overlay.tsx
usePathnamehook to track current routeuseRefto store previous pathname for comparisonuseEffecthook to detect pathname changeshideOverlayaction to store selectorNote
Prevents the task overlay from persisting when navigating to other pages.
TaskOverlayusingusePathnameand auseEffect; when the pathname changes and the overlay is visible, callshideOverlayhideOverlay; keeps existing overlay layout and animations intactWritten by Cursor Bugbot for commit 0cd7138. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.