feat: add responsive BackToTop floating button#160
Conversation
|
@hari2k7 is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a client-side BackToTop React component that appears after scrolling past a threshold and smoothly scrolls the page to a target; the component is imported and rendered inside the RootLayout. ChangesBack to Top Button Implementation
Sequence Diagram(s)sequenceDiagram
participant Page
participant BackToTop
participant Window
Page->>BackToTop: scroll event / read window.scrollY
BackToTop->>BackToTop: update visible state
User->>BackToTop: click BackToTop button
BackToTop->>Window: window.scrollTo({ top: scrollTo, behavior: 'smooth' })
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
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 unit tests (beta)
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: 3
🤖 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 `@components/ui/BackToTop.tsx`:
- Around line 10-15: The embedded usage docs in the header of the BackToTop
component reference the wrong path; update the example import and instructions
to the actual component path used in this repo. Edit the usage block in
components/ui/BackToTop.tsx so the sample import shows the correct module (e.g.,
import BackToTop from "`@/components/ui/BackToTop`";) and adjust the placement
guidance to match that file, keeping the example JSX (<BackToTop />) and any
surround text intact.
- Around line 44-73: The BackToTop button remains focusable/announced when
hidden; update the button element in the BackToTop component to toggle
accessibility attributes with the visible state: set tabIndex to 0 when visible
and -1 when not, and set aria-hidden to true when not visible (aria-hidden={
!visible }), so keyboard and screen-reader users won't focus or hear the hidden
button; keep existing className and handleClick behavior unchanged.
- Around line 33-37: The visibility state in BackToTop isn't initialized on
mount so if the page loads scrolled past threshold the button stays hidden until
a scroll event; inside the useEffect that registers handleScroll (the function
that calls setVisible based on window.scrollY and threshold), invoke
handleScroll once immediately after adding the listener (or before) so
visibility is computed on mount as well as on future scrolls.
🪄 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 Plus
Run ID: ec979092-00e6-44c5-a06a-e022849fc54a
📒 Files selected for processing (2)
app/layout.tsxcomponents/ui/BackToTop.tsx
|
Hi @hari2k7, |
vishnukothakapu
added
good first issue
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 `@components/ui/BackToTop.tsx`:
- Around line 15-24: The component currently causes an extra render by computing
initial visibility from window.scrollY and then immediately calling setVisible
in the useEffect; change the useState initialization to always start false
(useState(false)) and move the initial visibility check into the existing effect
so the effect both sets initial visibility and registers the scroll listener;
update references to visible/setVisible, keep threshold in the effect dependency
array, and ensure handleScroll still uses setVisible(window.scrollY > threshold)
and is cleaned up via removeEventListener.
🪄 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 Plus
Run ID: 0593cec8-a19e-402a-8449-a33cea8046b8
📒 Files selected for processing (1)
components/ui/BackToTop.tsx
There was a problem hiding this comment.
♻️ Duplicate comments (1)
components/ui/BackToTop.tsx (1)
17-22:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winThe double-render issue flagged by ESLint remains unresolved.
Line 18 still calls
setVisibledirectly inside the effect, causing a cascading render when the page loads scrolled past the threshold. This was flagged in previous reviews and is confirmed by the ESLint error.⚡ Fix to eliminate the extra render on mount
useEffect(() => { - setVisible(window.scrollY > threshold); const handleScroll = () => setVisible(window.scrollY > threshold); + handleScroll(); window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, [threshold]);🤖 Prompt for 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. In `@components/ui/BackToTop.tsx` around lines 17 - 22, The effect currently calls setVisible on mount causing an unnecessary extra render; instead initialize visibility from the current scroll position and only register the scroll handler in useEffect. Update the BackToTop component so the visible state is created with useState(() => (typeof window !== "undefined" ? window.scrollY > threshold : false)) and remove the initial setVisible(window.scrollY > threshold) from the useEffect; keep the handleScroll function and the window.addEventListener/cleanup as-is so subsequent scrolls still update setVisible based on threshold.
🤖 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.
Duplicate comments:
In `@components/ui/BackToTop.tsx`:
- Around line 17-22: The effect currently calls setVisible on mount causing an
unnecessary extra render; instead initialize visibility from the current scroll
position and only register the scroll handler in useEffect. Update the BackToTop
component so the visible state is created with useState(() => (typeof window !==
"undefined" ? window.scrollY > threshold : false)) and remove the initial
setVisible(window.scrollY > threshold) from the useEffect; keep the handleScroll
function and the window.addEventListener/cleanup as-is so subsequent scrolls
still update setVisible based on threshold.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ffa1b004-4755-467d-af24-a18fedf8d4f0
📒 Files selected for processing (1)
components/ui/BackToTop.tsx
|
Hi @vishnukothakapu, I have addressed all CodeRabbit review comments:
All conversations resolved. Kindly review when you get a chance
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
hey @hari2k7. your last two commits dint solve the coderabbit's errors: The second last commit fixed a11y & mount check but introduced double initialization (both useState AND useEffect computing visibility) The last commit's title says "eliminate double render" but didn't actually fix it . The setVisible still runs unconditionally at the top of useEffect. The simple fix is to just call handleScroll() instead of a separate setVisible() line. lmk after u fix it |
vishnukothakapu
added
gssoc:approved
and removed
good first issue
… of separate setVisible
|
Hi @vedhapprakashni, Fixed — removed the separate |
3 participants
What does this PR do?
Adds a reusable floating "Back to Top" button component to improve
navigation experience across long pages of the LinkID platform. The
button appears after scrolling 300px, smoothly scrolls to the top on
click, and automatically adapts to both light and dark mode.
Related Issue
Closes #159
Type of Change
How to Test
npm run devScreenshots (if UI change)
before:
after:
LinkID.-.Google.Chrome.2026-05-19.10-25-40.mp4
Checklist
Summary by CodeRabbit