Fix task overlay lingering on route change #2572
Conversation
|
|
Finished running flow.
|
||||||||||||||||||
📝 WalkthroughWalkthroughThe TaskOverlay component now tracks route changes using Next.js pathname hook and automatically hides the overlay when navigation occurs. It reads hideOverlay state from the task overlay store and establishes a pathname change detection mechanism via a ref-based previous pathname comparison. 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:19.740ZApplied to files:
📚 Learning: 2025-11-25T03:07:07.498ZApplied to files:
📚 Learning: 2025-11-25T03:05:31.051ZApplied 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 (4)
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 a bug where the task overlay UI component would persist when users navigate to different routes, causing unwanted UI overlap. The solution implements automatic overlay dismissal by monitoring route changes using Next.js navigation hooks.
- Adds route change detection using
usePathnamehook - Implements automatic overlay hiding when the route changes
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| hideOverlay(); | ||
| } | ||
| previousPathnameRef.current = pathname; | ||
| }, [pathname, hideOverlay]); |
There was a problem hiding this comment.
The hideOverlay function is included in the dependency array but may not be stable across renders. If hideOverlay is recreated on each render, this could cause unnecessary effect re-runs. Consider wrapping hideOverlay in useCallback within the store, or remove it from the dependency array if it's guaranteed to be stable.
| }, [pathname, hideOverlay]); | |
| }, [pathname]); |
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 ✨Explore these optional code suggestions:
|
|||||||||
🔍 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 Prompt4. MCP Integration Guidelines
5. CI-Ready Code Requirements
|
User description
Summary
Close the task overlay when the route changes to prevent UI overlap
PR Type
Bug fix
Description
Close task overlay when route changes to prevent UI overlap
Add pathname tracking with useEffect hook
Retrieve hideOverlay method from task overlay store
Compare previous and current pathname to trigger overlay closure
Diagram Walkthrough
File Walkthrough
task-overlay.tsx
Add pathname tracking to close overlay on navigationapps/studio.giselles.ai/app/(main)/ui/task-overlay.tsx
usePathnamehook from next/navigation for route trackinguseEffectanduseRefhooks for pathname comparison logichideOverlaymethod to store selectoroverlay
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.