Chalarangelo / 30-seconds-web

Website infrastructure for 30-seconds projects.

Home Page:https://30secondsofcode.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Investigate "Load more" pagination

Chalarangelo opened this issue · comments

Pagination might feel clunky in some cases. We should experiment with a Load more button instead for most listing pages. The outline is as follows:

  • Add a Load more link, which will fetch the JSON of the next page and append it to the page.
  • Update the URL to match the page where the user is scrolled to using intersection observers if possible.
  • Provide a Load previous link if on a numbered page (i.e. reloading or landing from Google) to load other pages in the list.
  • Make sure out of view cards do not impact performance too much.
  • Analytics options are as follows:
    • Switch all listing pageviews to generic URLs (i.e. /list instead of /list/p/:n).
    • Use the intersection observers to handle pageviews.

Note: SEO Guidelines for optimizing infinite scrolling pages might be of some value.

Note: The first Analytics option might be best in terms of actual data and usefulness, but it will render existing data less useful as it will mark a major change in data collection.

Technical issues aside, there's no real incentive to implement this. Pagination can be clunky and tricky to use but there's no clear indication users dislike it. Both browsing modes (load more, pagination) serve the user well in most scenarios and pagination can have the added benefit of allowing navigation to a specific page if the range allows.

Apart from all that, browsing mode is not a focus currently and users are not necessarily experiencing this journey all that often. As this task's size is pretty large, it's better that we focus our energy elsewhere and revisit this in the future shall we discover a more innovative approach.