Search code examples
amp-htmlaccelerated-mobile-pagegoogle-ampamp-list

AMP show loading indicator on Show More

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.

Solution

  • 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>