Fix scroll position not restored when doing Back on Desktop (#6842)
## Ticket 6743: Desktop: "Back" in Following Page no longer restores scroll position ## Issue This was a side-effect of "6609 claimListDiscover: don't re-render until query is done". That PR did not handle the case of navigating backwards, which typically would just need to display past results. It ended up always starting with a blank list on mount, so the scroll position could not be restored correctly. I don't know why it still worked on Web/Chrome -- maybe the latest browser knows how to move to desired scroll position when the height is available. ## Change If navigating backwards, initialize the final URI list with the previous result. It is almost always correct, and if not, will be corrected in the effects. This saves us one re-render when navigating backwards too.
This commit is contained in:
parent
1421a39518
commit
4a8c08c8bf
1 changed files with 18 additions and 1 deletions
|
@ -141,7 +141,6 @@ function ClaimListDiscover(props: Props) {
|
|||
const { search } = location;
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [forceRefresh, setForceRefresh] = React.useState();
|
||||
const [finalUris, setFinalUris] = React.useState([]);
|
||||
const isLargeScreen = useIsLargeScreen();
|
||||
const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
|
||||
const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
|
||||
|
@ -387,6 +386,9 @@ function ClaimListDiscover(props: Props) {
|
|||
: undefined;
|
||||
const livestreamSearchResult = livestreamSearchKey && claimSearchByQuery[livestreamSearchKey];
|
||||
|
||||
const [finalUris, setFinalUris] = React.useState(
|
||||
getFinalUrisInitialState(history.action === 'POP', claimSearchResult)
|
||||
);
|
||||
const [prevOptions, setPrevOptions] = React.useState(null);
|
||||
|
||||
if (!isJustScrollingToNewPage(prevOptions, options)) {
|
||||
|
@ -448,6 +450,10 @@ function ClaimListDiscover(props: Props) {
|
|||
</div>
|
||||
);
|
||||
|
||||
// **************************************************************************
|
||||
// Helpers
|
||||
// **************************************************************************
|
||||
|
||||
// Returns true if the change in 'options' indicate that we are simply scrolling
|
||||
// down to a new page; false otherwise.
|
||||
function isJustScrollingToNewPage(prevOptions, options) {
|
||||
|
@ -500,6 +506,17 @@ function ClaimListDiscover(props: Props) {
|
|||
return prev.length === next.length && prev.every((value, index) => value === next[index]);
|
||||
}
|
||||
|
||||
function getFinalUrisInitialState(isNavigatingBack, claimSearchResult) {
|
||||
if (isNavigatingBack && claimSearchResult && claimSearchResult.length > 0) {
|
||||
return claimSearchResult;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// **************************************************************************
|
||||
// **************************************************************************
|
||||
|
||||
React.useEffect(() => {
|
||||
if (shouldPerformSearch) {
|
||||
const searchOptions = JSON.parse(optionsStringForEffect);
|
||||
|
|
Loading…
Reference in a new issue