-
Notifications
You must be signed in to change notification settings - Fork 274
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix scroll restoration in the Pagination component #1508
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
juanpprieto
reviewed
Nov 14, 2023
templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx
Outdated
Show resolved
Hide resolved
blittle
force-pushed
the
bl-fix-scroll-reset
branch
from
November 14, 2023 15:03
184aeb7
to
ff4925c
Compare
juanpprieto
reviewed
Nov 16, 2023
juanpprieto
approved these changes
Nov 20, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🙏🏼
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fix the Pagination component to always restore scroll correctly on back/forth navigation.
Expected behavior and design considerations
This fix has the side effect of causing a hydration error only when the user refreshes an already paginated page. This is because during a refresh, the Paginated list is rendered with the browser's navigation state, not the state returned by the server. Navigation state might contain many pages of data, all of which is necessary to properly render the page height and restore scroll position. The result is a hydration mismatch between the browser and the server. We feel it isn't often the user would hard refresh the page, and when doing so, a hydration mismatch and flash of rendered content is an acceptable tradeoff for accurately maintaining the scroll location.
HOW to test your changes?
On the
/products
page as well as the/collections/:handle
do the following tasks (the collection page paginated on scroll):Load more
button does not show up.Another thing I already tested, but if you want to go the extra mile, create a link on a collection page to another collection page. Paginate through one collection page, then click a link to directly go to another collection page (same route, different params). Make sure that products don't bleed between the pages and pagination state is reset.
Checklist