@stimulus-library/controllers/dist/ajax/lazy_block_controller.js

A library of useful controllers for Stimulus

import { LoadBlockController } from "./load_block_controller";
import { useIntersection } from "@stimulus-library/mixins";
export class LazyBlockController extends LoadBlockController {
    async connect() {
        const element = this.el;
        if ("IntersectionObserver" in window) {
            const { observe, unobserve } = useIntersection(this, element, this.appear, null, { threshold: 0.3 });
            this.observe = observe;
            this.unobserve = unobserve;
        }
        else {
            await this.loadContent();
        }
    }
    async appear(entry) {
        if (entry.target === this.el && entry.isIntersecting) {
            await this.loadContent();
            if (this.unobserve) {
                this.unobserve();
            }
        }
    }
}