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

[Master feature] Element-level infinite scroll #14060

Open
ericlindley-g opened this Issue Mar 16, 2018 · 13 comments

Comments

@ericlindley-g
Collaborator

ericlindley-g commented Mar 16, 2018

Feature description:

Support element-level infinite scroll, such that when the user reaches the end of a list of items (search results, product cards, etc), a call can be made to an arbitrary endpoint to populate the list with more items. For the best user experience, users should never see a loading spinner, but instead should either be presented with already-loaded results, or a button to tap to load more.

Related issues:
TODO

Related PRs:
/cc @aghassemi, can you add relevant PRs here?

@ericlindley-g ericlindley-g added this to the Prioritized FRs milestone Mar 16, 2018

@ericlindley-g ericlindley-g self-assigned this Mar 16, 2018

@ericlindley-g ericlindley-g added this to Feature Backlog in AMP HTML Project Roadmap via automation Mar 16, 2018

@ericlindley-g ericlindley-g moved this from Feature Backlog to In Progress in AMP HTML Project Roadmap Mar 16, 2018

This was referenced Apr 16, 2018

@ampprojectbot

This comment has been minimized.

Collaborator

ampprojectbot commented Jun 5, 2018

This issue doesn't have a category which makes it harder for us to keep track of it. @ericlindley-g Please add an appropriate category.

@mofidsky

This comment has been minimized.

mofidsky commented Jul 11, 2018

we need this feature urgently. when do you think you can release a version?

@ericlindley-g

This comment has been minimized.

Collaborator

ericlindley-g commented Jul 12, 2018

@mofidsky We're targeting release this quarter— @cathyxz, who is working on the implementation, may or may not be able to offer a better estimate.

We'd love to hear feedback when you're able to try it out—if you can share an examples of how you plan to use it that could help us make sure we're capturing relevant use cases.

@mofidsky

This comment has been minimized.

mofidsky commented Jul 12, 2018

@ericlindley-g We're trying to build a news web site so that contents are loaded when users scroll down, something like Facebook web site or Instagram app for instance.

@ericlindley-g

This comment has been minimized.

Collaborator

ericlindley-g commented Jul 12, 2018

@mofidsky — Thanks! That sounds like the general use-case we're building for.

I should note that amp-next-page supports infinite scroll for entire documents of content (as opposed to infinite scroll for elements within a single page), in case you're interested in that experience.

@heiwen

This comment has been minimized.

heiwen commented Oct 25, 2018

@ericlindley-g, @cathyxz We are also have a use case for this component on the product detail pages of our e-commerce aggregator. We compare offers from different merchants selling the same product, in the case of marketplaces they even have multiple offers of the same product. We allow the user to browse for the merchant/marketplace first and then drill-down into the respective offer. Right now we are pre-loading all the content into the HTML and just playing with the visibility, that bloats the HTML quite significantly though.

For an example, check out the following page: https://iprice.my/compare/apple-iphone-8/ and scroll to the "Compare Prices" section.

This is quite high in our backlog right now, happy to help in the development or testing of the component, let us know how we can contribute.

@buihoanghai

This comment has been minimized.

buihoanghai commented Oct 25, 2018

My current approach is using the recursive template mustache. This template has 2 parts. First one for loop items, another one for next items. The next section consist a form which using this template again. Check the image bellow:
image
Im thinking if we add high trust event for amp-position-observer we will have real infinity scroll :).

@aghassemi

This comment has been minimized.

Member

aghassemi commented Oct 25, 2018

@buihoanghai We are working a first-class support for this. It is under development but you can give it a try experimentally ( not valid in Prod ) using amp-load-more experiment (sample: https://github.com/ampproject/amphtml/blob/master/test/manual/amp-list-load-more.amp.html )
ETA for launch is Dec/Jan.

We are not planning to make position-observer emit hight-trust events as scroll is not a strong user-interaction signal to be allowed to relayout the page.

@ericlindley-g

This comment has been minimized.

Collaborator

ericlindley-g commented Nov 2, 2018

Thanks @heiwen — I defer to @cathyxz if additional help would speed up the timeline here, but we appreciate the info on your use case either way

By the way — great AMP-first implementation of your site! It's awesome to see AMP used to build great experiences on the main version of a site like yours

@leonalicious

This comment has been minimized.

Contributor

leonalicious commented Nov 8, 2018

@ericlindley-g Nice to see this feature is on the radar, is there anyway we can contribute and build this thing together to achieve infinite scroll to load more data like this along with Masonry / Waterfall layout like what pinterest is having ? we are looking forward to contribute and share the workload together, but with concern of not knowing what's the current state for these components and how to step in. Please advise.

/cc @cathyxz

@ericlindley-g

This comment has been minimized.

Collaborator

ericlindley-g commented Nov 8, 2018

Thanks for reaching out, @leonalicious@cathyxz is in the best position to know if there are opportunities to contribute on this component, so I'll let her answer that aspect. My guess is that the most important place to contribute is in testing the component when it's feature complete and experimentally available, but @cathyxz may know of opportunities to contribute to the development itself.

@cathyxz

This comment has been minimized.

Collaborator

cathyxz commented Nov 8, 2018

It's experimentally available under amp-list-load-more, with an in-progress demo here. I'm trying to resolve the amp-list-resizable-children right now, and will be iterating on various corner cases for infinite scroll after that.

@leonalicious

This comment has been minimized.

Contributor

leonalicious commented Nov 12, 2018

It's experimentally available under amp-list-load-more, with an in-progress demo here. I'm trying to resolve the amp-list-resizable-children right now, and will be iterating on various corner cases for infinite scroll after that.

Cool, any timeline for the infinite scroll ? May I assist you ? which branch are you using for development of this feature ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment