Infinite loading with Phoenix Live View Feedback

[tgxworld]

I was able to swing infinite loading using Phoenix Live View but it felt a little hacky. I was hoping to see if anyone has another solution or have done it in a better way.

  <%= if length(@merchants) < @merchants_length do %>
    <div class="column">
      <div class="merchant-index-load-more" phx-click="load-more">
        <progress class="progress is-danger is-hidden" max="100">30%</progress>
      </div>
    </div>

    <script>
      new IntersectionObserver((entries, observer) => {
        const entry = entries[0];

        if (entry.isIntersecting) {
          entry.target.children[0].classList.remove("is-hidden");
          entry.target.click();
        }
      }).observe(document.querySelector(".merchant-index-load-more"), {
        root: document.querySelector(".merchant-index")
      });
    </script>
  <% end %>