Show htmx-indicator while populating a table (not working)

Question

I have a simple table using Bootstrap and HTMX, with infinite data loading done via Templ in golang. I've put that code (the last row in the code segment below). I just can't, for the life of me, get the .htmx-indicator to show up as it is populating the next bunch of rows.

{{ template "_header.html" . }}
<!-- index.html -->
<script src="/static/htmx.min.js"></script>
<div class="jumbotron">
  <div class="container">
    <table class="table table-striped"
    hx-get="/new?l=100&p=1"
    hx-trigger="load"
    hx-swap="afterbegin"
    >
    <thead>
      <tr>
      <th scope="col">Col1</th>
      <th scope="col">Col2</th>
      <th scope="col">Col3</th>
      </tr>
    </thead>
    <tbody>
            <tr 
                hx-get="/new?p=2&l=100"
                hx-trigger="revealed"
                hx-swap="afterend"
                hx-indicator=".htmx-indicator"
            >
                <td scope="row">-- { data.Field1 }</td>
                <td scope="row">-- { data.Field2 }</td>
                <td scope="row">-- { data.Field3 }</td>
            </tr>

    </tbody>
    </table>
  </div>
</div>
{{ template "_footer.html" . }}

Answer 1

The htmx-indicator attribute expects an element you want HTMX to add,, htmx-request class added to during the request. See the docs:

The hx-indicator attribute allows you to specify the element that will have the htmx-request class added to it for the duration of the request. This can be used to show spinners or progress indicators while the request is in flight.