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>