3

I followed this example to implement a "Show More" action on AMP. It's working great but when I click on the button it doesn't display anything to give the user the idea that the page is loading.

My backend isn't particularly fast and so it looks like it didn't work until, eventually, things load.

In the demo it doesn't have anything either, but it's super fast.

Can anything be done? Even if it's just disabling the button. I don't see any class changes on the list or form as to use them on the CSS.

This is my code:

amp-state id="#{section}State" src="#{path}"
amp-state id="#{section}"
  script type="application/json"
    | {
    | "page": 2,
    | "hasMorePages": true
    | }
|<amp-list src="#{path}" layout="responsive" height="600px" width="600px" [src]="#{section}State.items" [height]="(#{section}State.items.length / 3) * 400">
template[type="amp-mustache"]
  = render partial: item_template, locals: { image: image }
|</amp-list>
form method="GET" action="#{path}" action-xhr="#{path}" target="_top" on="submit-success: AMP.setState({ #{section}State: { items: #{section}State.items.concat(event.response.items) }, #{section}: { page: #{section}.page + 1, hasMorePages: event.response.hasMorePages } });" novalidate=""
  |<input type="hidden" name="page" value="2" [value]="#{section}.page">
  |<input type="submit"
         value="Show more"
         class="show-more"
         [class] = "(#{section}.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show show-more')">

It's just the one from the example with a few naming changes.

moondaisy
  • 4,303
  • 6
  • 41
  • 70

1 Answers1

3

There are two pays to show a loading indicator on form submission:

  1. Use amp-form's built-in submitting state: 

    <form ...>
  ...
  <button>Show more</button>
    ...
  <div submitting>
     Loading...
  </div>
</form>

  2. If you need more flexibility you can keep track of the form state in an amp-state variable, e.g. myFormState, which is then updated on the different form submit events. Based on the variable you can then hide and show different elements on your page:

    <form on="submit:         AMP.setState( { myFormState: 'submitting' } ),
          submit-success: AMP.setState( { myFormState: 'success' } ),
          submit-error:   AMP.setState( { myFormState: 'error' } )
         " ... >

<amp-list [hidden]="myFormState != 'success'" ... > ... </amp-list>
<div hidden [hidden]="myFormState != 'submitting'" ...>Loading</div>
<div hidden [hidden]="myFormState != 'error'" ...>Something went wrong :-(</div>
Sebastian Benz
  • 4,238
  • 1
  • 21
  • 17
  • Thanks, I ended up realizing that the form gets this class added while submitting `.amp-form-submitting` but your answer provides a better and more flexible approach – moondaisy Sep 04 '18 at 12:16