title: AMP show loading indicator on Show More
body: <p>I followed <a href="https://ampbyexample.com/advanced/show_more_button/" rel="nofollow noreferrer">this example</a> 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.</p>
  
  <p>My backend isn't particularly fast and so it looks like it didn't work until, eventually, things load.</p>
  
  <p>In <a href="https://ampbyexample.com/advanced/show_more_button/preview/" rel="nofollow noreferrer">the demo</a> it doesn't have anything either, but it's super fast.</p>
  
  <p>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.</p>
  
  <p>This is my code:</p>
  
  <pre><code>amp-state id="#{section}State" src="#{path}"
  amp-state id="#{section}"
    script type="application/json"
      | {
      | "page": 2,
      | "hasMorePages": true
      | }
  |&lt;amp-list src="#{path}" layout="responsive" height="600px" width="600px" [src]="#{section}State.items" [height]="(#{section}State.items.length / 3) * 400"&gt;
  template[type="amp-mustache"]
    = render partial: item_template, locals: { image: image }
  |&lt;/amp-list&gt;
  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=""
    |&lt;input type="hidden" name="page" value="2" [value]="#{section}.page"&gt;
    |&lt;input type="submit"
           value="Show more"
           class="show-more"
           [class] = "(#{section}.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show show-more')"&gt;
  </code></pre>
  
  <p>It's just the one from the example with a few naming changes.</p>