Add ability to force amp-live-list to update without waiting for poll

[westonruter]

What's the issue?

In implementing WordPress Comments in AMP, we chose to use amp-live-list to allow new comments to appear in the list without having to reload the page. Additionally, there is a comment form which allows a user to submit a new comment to add to the page. Given that amp-live-list works by polling for updates exclusively, there isn't currently a way to submit the comment form and see your comment immediately in the list. Instead, you have to wait for the poll interval to transpire and even then you have to click the Update button to see the comment appear. This isn't ideal.

It would preferable if:

1. I submit a comment.
2. As soon as the server responds, the form-success message is shown.
3. The new comment immediately is shown and scrolled into view (without having to click Update).

I see two possible solutions: first there could be a new AMP action exposed on an amp-live-list to force trigger an update when the form submission is successful. For example, an update method exposed on an amp-live-list:

<amp-live-list id="comments">
...
</amp-live-list>
<form ... on="submit-success:comments.update" ...>
...
</form>

This wouldn't allow for the new comment specifically to be scrolled into view, since the user may be replying to a comment thread that doesn't appear adjacent to the comment form. In that case, there could also be support for a AMP-Redirect-To header that is returned in the form submission response whereby (somehow) the fragment identifier in the response header's URL could be used to scroll to the comment that appears in the amp-live-list upon refreshing (I realize this would conflict with the “hybrid approach” outlined in #14170) but I'm just trying to think of some ways that things could be hooked together.

Maybe the above amp-live-list proposed update method could include an element ID that should be scrolled into view when the update finishes? Maybe the form submission response could in its JSON data contain the element ID that should be scrolled to and then this data could be passed to the update method? Roughly:

1. Submit the form.
2. Server responds with:

{
    "message": "Comment posted.",
    "target": "comment-123"
}

3. The submit-success event is triggered with the data coming back from the server then passed into the update method:

<form ... on="submit-success:comments.update(event.data.target)" ...>

Maybe that's better but still the connection between the form submission and the amp-live-list doesn't feel totally solid.

How do we reproduce the issue?

You can try it out yourself at https://dev-ampconfdemo.pantheonsite.io/2018/02/06/are-you-there-lebron-its-me-lebron-a-superstars-ultimate-pep-talk/#respond

Simply submit a comment and then notice you have to wait ~15 seconds to then see the prompt to show the comment in the list. Note also the normal WordPress sort order of new comments being added to the end depends on #5396; normally scrolling up to the top of the list would not be done.

What browsers are affected?

All browsers.

Which AMP version is affected?

Not new. Version 1521675336754

[aghassemi]

/to @ericlindley-g and @erwinmombay

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.