-
Notifications
You must be signed in to change notification settings - Fork 179
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
Dashboard: Prevent scroll to top on pagination #2883
Conversation
…status to prevent scroll to top on new page load. adding memo() to my stories content and header as they are pure components recieving the same props and LOTS of props. To expand on this later. Limiting search results to first 5 and memoizing, there is no need to pass the whole list of results to the typeahead right now as it is only showing the first few results. Note: come back and enable scrolling.
Codecov Report
@@ Coverage Diff @@
## master #2883 +/- ##
===========================================
- Coverage 81.95% 69.27% -12.69%
===========================================
Files 675 699 +24
Lines 10346 11875 +1529
===========================================
- Hits 8479 8226 -253
- Misses 1867 3649 +1782
|
Size Change: +8 B (0%) Total Size: 996 kB
ℹ️ View Unchanged
|
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.
LGTM 👍
@@ -114,7 +125,13 @@ function Header({ | |||
handleLayoutSelect={view.toggleStyle} | |||
currentSort={sort.value} | |||
pageSortOptions={STORY_SORT_MENU_ITEMS} | |||
handleSortChange={sort.set} | |||
handleSortChange={useCallback( |
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.
Nit: I'd have put this into a variable, e.g. const onHandleSortChange = useCallback(...)
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.
i'll move this in my next pr - thanks!
Karma tests timed out, but will have to wait until #2887 is resolved for this to pass through normally. |
Summary
Omar identified a bug that we didn't notice with the update to implement scroll to top when you swap from 'all results' to 'draft' or 'publish', we didn't notice it because when that was implemented we were also loading 100 stories at a time so it wasn't as visible - now with our 24 results at a time it's noticeable :D
![bad scroll](https://user-images.githubusercontent.com/10720454/86185824-2ee48d80-baec-11ea-8026-b9ca014f6b51.gif)
Bug
Solution
![paginate without scroll to top](https://user-images.githubusercontent.com/10720454/86184844-cf857e00-bae9-11ea-98d7-8d1b576022b6.gif)
(pardon my glitchy recording)
Paginate without scrolling
Scroll up with switch in filter
![switch to drafts scroll](https://user-images.githubusercontent.com/10720454/86184857-d6ac8c00-bae9-11ea-941a-dca0a61152d7.gif)
Scroll to top on sort update
![sort scroll to top](https://user-images.githubusercontent.com/10720454/86185812-22603500-baec-11ea-9623-30232cc71e6d.gif)
Relevant Technical Choices
Content
from scrolling to top when a new page is loaded and keeps the actions tight.Content
andHeader
in memo since they are pure components that load a lot of props with a lot of data. This will be expanded on later but for now just the default comparison.To-do
User-facing changes
Testing Instructions
Addresses #2884