feat(ui): implement sidebar scroll position preservation #8517
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
👋 Codeowner Review RequestThe following codeowners have been identified for the changed files: Team reviewers: @nodejs/nodejs-website Please review the changes when you have a chance. Thank you! 🙏 |
There was a problem hiding this comment.
Pull request overview
This PR implements scroll position preservation for the sidebar on the Learn Page, addressing issue #8336 where the sidebar would reset to the top when navigating between articles. The implementation uses React's forwardRef pattern and a custom hook to track and restore scroll positions across navigation.
Key Changes:
- Created a new
useNavigationStatehook that debounces scroll events and stores scroll positions in a context-based state store - Modified the
Sidebarcomponent to support ref forwarding, allowing parent components to access the underlying DOM element - Integrated the scroll preservation functionality into the
withSidebarcomponent
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
packages/ui-components/src/Containers/Sidebar/index.tsx |
Converted from functional component to forwardRef to expose the sidebar element for scroll position tracking |
apps/site/hooks/client/useNavigationState.ts |
New custom hook that manages scroll position state using context, debouncing, and DOM manipulation |
apps/site/hooks/client/index.ts |
Added export for the new useNavigationState hook |
apps/site/components/withSidebar.tsx |
Integrated scroll position preservation by using useNavigationState hook with a ref to the sidebar element |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…and fixed potential memory leak issue in useNavigationState
| @@ -1,8 +1,10 @@ | |||
| import { forwardRef } from 'react'; | |||
There was a problem hiding this comment.
I'm not sure forwardRef is compartible with RSC. Wouldn't this make this component inplicitly a client component?
There was a problem hiding this comment.
If so, you gotta ensure the 'use client'; at the top to keep things explicit.
There was a problem hiding this comment.
forwardRef itself is compatible with RSC. However, the component is being used by withSidebar.tsx which is a client component (has 'use client'). So adding use client.
There was a problem hiding this comment.
No, let's remove use client, can't this component itself be RSC if withSidebar changes? IMO we should only 'use client' if absolutely needed.
ovflowd
left a comment
ovflowd
left a comment
There was a problem hiding this comment.
I feel we're missing tests that verify the hook works as expected and scrolls to an element that was outside of the view.
…handling in Sidebar
github-actions
bot
removed
the
github_actions:pull-request
|
Lighthouse Results
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8517 +/- ##
==========================================
- Coverage 74.70% 74.37% -0.34%
==========================================
Files 102 103 +1
Lines 8956 9012 +56
Branches 305 306 +1
==========================================
+ Hits 6691 6703 +12
- Misses 2263 2307 +44
Partials 2 2 ☔ View full report in Codecov by Sentry. |
…nt in Sidebar component
…r component and add scroll handling functionality
ovflowd
left a comment
ovflowd
left a comment
There was a problem hiding this comment.
Left a few nits, but SGTM! And thanks for the work and effort here 🙇
Signed-off-by: Malav Shah <shahmalav1995@gmail.com>
|
Addressed nitpicks and ran |
3 participants
Description
This PR adds functionality to preserve sidebar scroll location on Learn Page
Validation
Before:
https://github.com/user-attachments/assets/41ca31eb-72c2-447a-a6a7-2d451171775e
After:
https://github.com/user-attachments/assets/656713ee-5d03-430f-beda-8ae491f415a8
Related Issues
Fixes #8336
Check List
pnpm formatto ensure the code follows the style guide.pnpm testto check if all tests are passing.pnpm buildto check if the website builds without errors.