Infinite loading with Phoenix Live View Feedback

Google Photos

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>

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

        if (entry.isIntersecting) {
      }).observe(document.querySelector(".merchant-index-load-more"), {
        root: document.querySelector(".merchant-index")
  <% end %>

A post was split to a new topic: Is there a way to publish changes from the client to the liveview socket?