fix(availability): prevent hover animation jump when switching days #22209
Conversation
|
@ddoemonn is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (07/02/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (07/02/25)1 label was added to this PR based on Keith Williams's automation. |
There was a problem hiding this comment.
cubic reviewed 1 file and found no issues. Review PR in cubic.dev.
|
This PR is being marked as stale due to inactivity. |
WalkthroughThe Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/features/timezone-buddy/components/CellHighlightContainer.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-playwright". (The package "eslint-plugin-playwright" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-playwright" was referenced from the config file in ".eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/features/timezone-buddy/components/CellHighlightContainer.tsx (1)
33-41: Consider optimizing the initial render behavior.The date change detection logic is well-implemented and correctly prevents animation jumps. However, consider adding a guard to prevent unnecessary execution on the initial render:
useEffect(() => { + if (prevBrowsingDateRef.current === null) { + prevBrowsingDateRef.current = browsingDate; + return; + } if (prevBrowsingDateRef.current?.getTime() !== browsingDate.getTime()) { setIsAnimating(false); // Clear hover state and position when date changes emitCellPosition(-1); prevBrowsingDateRef.current = browsingDate; } }, [browsingDate, emitCellPosition]);And initialize the ref with
null:- const prevBrowsingDateRef = useRef(browsingDate); + const prevBrowsingDateRef = useRef<Date | null>(null);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/features/timezone-buddy/components/CellHighlightContainer.tsx(2 hunks)
🔇 Additional comments (4)
packages/features/timezone-buddy/components/CellHighlightContainer.tsx (4)
16-18: LGTM: Proper store properties extraction and ref initialization.The addition of
browsingDateandemitCellPositionfrom the store and the initialization ofprevBrowsingDateRefare correctly implemented to support the date change detection functionality.
25-26: LGTM: Improved animation responsiveness.The reduction from 1000ms to 300ms creates a more responsive user experience while maintaining smooth animations. The explanatory comment is helpful for future maintainers.
66-66: LGTM: Improved overflow handling.Adding
overflow-hiddenalongsideoverflow-x-scrollcorrectly prevents vertical overflow issues while maintaining the horizontal scrolling functionality.
71-75: LGTM: Fixed typo and improved animation logic.The changes correctly address multiple issues:
- Fixed the CSS typo from
opcaity-0toopacity-0- Simplified the opacity animation to a clean 0-to-1 transition
- The conditional opacity logic properly responds to both animation and hover states
packages/features/timezone-buddy/components/CellHighlightContainer.tsx
Outdated
Show resolved
Hide resolved
E2E results are ready! |
What does this PR do?
Improves timezone buddy cell highlight animation responsiveness and fixes visual glitches
fixes #22206
opcaity-0→opacity-0) and improved container overflow handlingThe changes make the timezone comparison interface feel more responsive and prevent jarring visual transitions when users navigate between different dates.
Video Demo (if applicable):
Screen.Recording.2025-07-02.at.15.02.04.mov
Mandatory Tasks (DO NOT REMOVE)