Rendering multiple LiveView Streams with Infinite Scroll based on viewport size

I know this is an old post but I am implementing something very similar, and my solution is basically rendering the table or the card view depending on the screen size. (e.g., <table :if={@screen_layout == :desktop} />) It’s not perfect, but works decently.

Just for anyone landing on this thread from search i figured i’d put this here

Instead of using phx-viewport-bottom you could use an Intersection Observer positioned after the streamed elements.

What I usually do is create a custom element that “clicks” a child button once it is in view. Here’s an example of how that could be implemented

class InfiniteScrollTrigger extends HTMLElement {
  observer = new IntersectionObserver(([entry]) => this.trigger(entry), {
    threshold: 1,
  });

  trigger(entry) {
    this.querySelector("button")?.click();
  }

  connectedCallback() {
    this.observer.observe(this);
    this.style.display = "contents";
  }

  disconnectedCallback() {
    this.observer.disconnect();
  }
}


customElements.define("infinite-scroll-trigger", InfiniteScrollTrigger);

  <infinite-scroll-trigger event="load_more" value={@cursor}>
    <.button phx-click="load_more" value={@cursor} phx-disable-with="Loading...">
      Load more
    </.button>
  </infinite-scroll-trigger>

Alternatively, you could make a hook which you apply to a div or something.
I prefer the wrapper method as it makes loading state much simpler, you just use the built in phx attributes

hooks.InfiniteScrollTrigger = {
  mounted() {
    this.observer = new IntersectionObserver(([{ isIntersecting }]) => {
      if (!this.el.hasAttribute("disabled")) {
        this.pushEvent(this.el.getAttribute("phx-intersect"), {
          value: this.el.getAttribute("value"),
        });
      }
    });
    this.observer.observe(this.el);
  },
  beforeDestroy() {
    this.obsever.disconnect();
  },
};