search

plebbit / plebchan

A GUI for plebbit similar to 4chan
https://plebchan.eth.limo
GNU General Public License v2.0
21 stars 8 forks source link

If you open a thread page sometimes it opens scrolled to the middle already #29

Closed estebanabaroa closed 1 year ago

estebanabaroa commented 1 year ago

When a thread page is open, it should scroll to the top, unless it's the user navigating through the back button.

estebanabaroa commented 1 year ago

Actually I noticed it happens on all pages. For example going from the home to board view as well.

plebeius-eth commented 1 year ago

Fixed: 0e77779f1ecd0c60bccea7e923e45aaef60b9dc3

estebanabaroa commented 1 year ago

it shouldnt scroll up when the user clicks the back button. If Im at the end of the catalog, then click a post, then click the back button, I should get back to the end of the catalog, not scrolled all the way back up.

plebeius-eth commented 1 year ago

it shouldnt scroll up when the user clicks the back button. If Im at the end of the catalog, then click a post, then click the back button, I should get back to the end of the catalog, not scrolled all the way back up.

Fixed for both catalog views: a122e6d15d1da6eed0e92c3bf0e1cde16122e1d8 I spent some time trying to figure out how to retain the scroll position for the Board view and Subscriptions view (I tried to save it in a store), only to realize that it's Virtuoso resetting it a each mount. So I researched this, and it might be done by using its prop initialTopMostItemIndexcombined with react-router useLocation, but I find it confusing.

For now, I think it's fine that the regular view scrolls back up, while the catalog retains the position, because the regular view isn't supposed to be used for prolonged browsing anyway, since threads take so much space to begin with.

estebanabaroa commented 1 year ago

it shouldnt scroll up when the user clicks the back button. If Im at the end of the catalog, then click a post, then click the back button, I should get back to the end of the catalog, not scrolled all the way back up.

Fixed for both catalog views: a122e6d I spent some time trying to figure out how to retain the scroll position for the Board view and Subscriptions view (I tried to save it in a store), only to realize that it's Virtuoso resetting it a each mount. So I researched this, and it might be done by using its prop initialTopMostItemIndexcombined with react-router useLocation, but I find it confusing.

For now, I think it's fine that the regular view scrolls back up, while the catalog retains the position, because the regular view isn't supposed to be used for prolonged browsing anyway, since threads take so much space to begin with.

it's really annoying to lose the position even in the board view. I think it doesn't happen on plebbit-react because clicking on a post opens it as a modals. Maybe we should implement clicking on a thread as opening it in a modal. we have to move the catalog to using virtuoso at some point so we will have to do it. there are higher priority stuff for now but I think implementing both catalog as virtuoso and being able to click return and not lose the position are somewhat high priority. they affect the UX negatively quite a bit.

plebeius-eth commented 1 year ago

Maybe we should implement clicking on a thread as opening it in a modal.

What about implementing infinite paging instead, like search engines do it, removing infinite scroll/virtuoso? It would solve the scrolling retention problem, performance and also scrolling glitches (and possibly more problems from Virtuoso in the future...). The UI would be identical to 4chan, showing 10 pages by default, but then showing one page more for every page after n.6 (loadMore).

I think users would like this far more than a reddit post modal UX, because it's the same UX as 4chan.

Maybe sub owners would prefer it too, if they could set a limit for the max number pages, which would benefit moderation. They could also be able to prohibit viewing a thread directly if it's surpassed page 10 (that would be a simple front-end bool checking a paging array).

paging