4
0 Comments

IntersectionObserver 0, Mauro 1

As the number of apps increases day by day, I had to find an optimum solution to incrementally load the content.
So I run into the so called "Interception Observer", an observer whose role is to trigger some action, for example, when an element on the viewport became visible.
So the idea was to initially load 8 apps, then when the user scrolls and reaches the end of the page (or, the beginning of my footer), load other 8 apps.

This is the final IntersectionObserver code I am using:


var isLoading = false;
let footer = document.querySelector('footer');

        let observer2 = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {

                // if I do not check isLoading, I risk to call loadMore while another request is still running, causing duplicates in the output
                if (entry.isIntersecting && !isLoading) {

                    isLoading = true;
                    // show the loading spinner
                    $("#main").show();
                    // an ajax call to get 8 more apps and add them to the viewport
                    loadMore();
                }

            });
        }, {threshold: 0.1, root: null });
        observer2.observe(video);

Thanks to this code I've achieved a great speedup in the first loading.

I didn't measure it but it's noticeable (loading 8 apps instead of all of them is a big difference).

Take a look if you're interested!

Trending on Indie Hackers
I quit. 52 startups in 52 weeks 64 comments Launching new product today, hope to get your support and feedback ❤️ 16 comments Twitter accounts directory 11 comments 🐚 I Need Your Help! Landing Page Feedback 6 comments My first product with GPT-3: Get backlinks to improve your SEO 6 comments My Process For Building Fast 5 comments