AMP показать индикатор загрузки на Show More

Question

Я последовал этому примеру, чтобы реализовать действие "Показать больше" в AMP. Он отлично работает, но когда я нажимаю на кнопку, он ничего не отображает, чтобы дать пользователю представление о том, что страница загружается.

Мой бэкэнд не очень быстрый, и, похоже, он не работал до тех пор, пока все не загрузилось.

В демоверсии этого тоже ничего нет, но это супер быстро.

Можно ли что-нибудь сделать? Даже если это просто отключение кнопки. Я не вижу никаких изменений класса в списке или форме, чтобы использовать их в CSS.

Это мой код:

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')">

Это только один пример из нескольких изменений имен.

Answer 1

Существует два варианта отображения индикатора загрузки при отправке формы:

1. использование amp-formвстроенный submitting государство:

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

2. Если вам нужна большая гибкость, вы можете отслеживать состояние формы в amp-state переменная, например myFormState, который затем обновляется в другой форме отправки событий. Основываясь на переменной, вы можете скрыть и показать различные элементы на своей странице:

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