fix: fixed scroll issue while configuring workflow#23142
fix: fixed scroll issue while configuring workflow#23142anikdhabal merged 1 commit intocalcom:mainfrom
Conversation
|
@ShashwatPS is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
|
|
WalkthroughA useEffect hook was added to packages/features/ee/workflows/pages/workflow.tsx. It computes an isPending flag (from isPendingWorkflow or isPendingEventTypes) and, on changes to this flag, schedules a requestAnimationFrame that calls window.scrollTo({ top: 0, behavior: "smooth" }). No exported/public API signatures changed. No other logic or control flow was modified. Assessment against linked issues
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
workflows
|
Hey there and thank you for opening this pull request! 👋🏼 We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted. Details: |
ShashwatPS
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/features/ee/workflows/pages/workflow.tsx (2)
112-120: Guard the scroll to run only after data has finished loading; add cleanup and reduced-motion respectAs written, this fires on every toggle of isPending (including when it becomes true) and doesn’t cancel a queued rAF on unmount. Also, respect users who prefer reduced motion.
Apply this diff:
- useEffect(() => { - requestAnimationFrame(() => { - window.scrollTo({ - top: 0, - behavior: "smooth", - }); - }); - }, [isPending]); + useEffect(() => { + // Only scroll when loading has finished + if (isPending) return; + const prefersReducedMotion = + typeof window !== "undefined" && + "matchMedia" in window && + window.matchMedia("(prefers-reduced-motion: reduce)").matches; + const rafId = requestAnimationFrame(() => { + window.scrollTo({ + top: 0, + behavior: prefersReducedMotion ? "auto" : "smooth", + }); + }); + return () => cancelAnimationFrame(rafId); + }, [isPending]);
112-120: Avoid unexpected top-of-page jumps after later refetches (e.g., post-save) by gating to initial load onlyAfter updates, invalidate() will refetch and flip isPending again, causing another scroll-to-top. If the intent is “only on first load,” gate with a ref.
Please verify: after saving a workflow (which invalidates queries), does the page jump back to top? If yes, consider this adjustment:
Add a ref (outside this block):
// augment the existing import: // import { useEffect, useState } from "react"; import { useEffect, useState, useRef } from "react"; // inside component: const hasScrolledOnInitialLoadRef = useRef(false);Then adapt the effect:
useEffect(() => { if (isPending || hasScrolledOnInitialLoadRef.current) return; const rafId = requestAnimationFrame(() => { window.scrollTo({ top: 0, behavior: "smooth" }); hasScrolledOnInitialLoadRef.current = true; }); return () => cancelAnimationFrame(rafId); }, [isPending]);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/features/ee/workflows/pages/workflow.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/features/ee/workflows/pages/workflow.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/features/ee/workflows/pages/workflow.tsx
⏰ 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)
- GitHub Check: Install dependencies / Yarn install & cache
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (1)
packages/features/ee/workflows/pages/workflow.tsx (1)
112-120: Approach looks good (rAF + scroll after data fetch)Using requestAnimationFrame ensures scrolling happens post-paint, which is appropriate for this UI glitch. Nice, small, targeted fix.
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/17/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (08/17/25)1 label was added to this PR based on Keith Williams's automation. "Add ready-for-e2e label" took an action on this PR • (08/18/25)1 label was added to this PR based on Keith Williams's automation. |
E2E results are ready! |
4 participants
What does this PR do?
Video Demo:
Before Fix
https://www.loom.com/share/8e93e6b2ecc440ab91abc3f6840ca778?sid=9791328e-2245-4db1-836c-c9cf3d41823c
After Fix
https://www.loom.com/share/480473716d384d009b403974c52cbd6f?sid=25685ee0-153c-47c4-b324-69a7122cfb39
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Files Modified
packages/features/ee/workflows/pages/workflow.tsx
Approach
After the initial data for the configuration page has been fetched, I added a pending state that tracks this in the useEffect dependency array. This runs a callback function to scroll to the top inside a requestAnimationFrame, ensuring the scroll happens after the DOM has loaded.
Checklist