Infinite Scroll

The infinite scroll pattern provides a way to load content dynamicallyon user scrolling action. This example is almost identical the the Click To Load.

• Full Code at GitHub
• Source at htmx.org

Check the Click To Load example. The only difference is the render() implementation with the introduction of the hx_trigger and hx_swap attributes. In the Click To Load example, we used the LoadMoreButton to trigger the load action. Here is the updated render() method:

@app.endpoint("/contacts/")
class ContactsSlice(Endpoint[ContactsSliceAttrs]):
    ...

    @override
    def render(self) -> Blank[TableRow]:
        *init, last = (
            (contact["id"], contact["name"], contact["email"])
            for contact in self.attrs["contacts"]
        )
        return Blank(
            *(TableRow(*rows) for rows in init),
            TableRow(
                *last,
                hx_get=self.url_for(ContactsSlice).include_query_params(
                    page=self.attrs["page"] + 1
                ),
                hx_trigger="revealed",
                hx_swap="afterend",
            ),
        )